刪除多餘的電池室

Question

我有下面的腳本：

var cells = [].slice.call(document.querySelectorAll("#myTable td")); 
 
    var search = document.getElementById("myInput"); 
 
    
 
    search.addEventListener("keyup", function() { 
 
     cells.forEach(function(cell) { 
 
      if (!search.value.trim()) { 
 
       cell.style.background = "white"; 
 
       cell.style.display = 'table-cell'; 
 
      } else if (cell.textContent.toLowerCase().indexOf(search.value.toLowerCase()) == 0) { 
 
       cell.style.background = 'yellow'; 
 
       cell.style.display = "table-cell"; 
 
      } else { 
 
       cell.style.background = "white"; 
 
       cell.style.display = 'none'; 
 
      } 
 
     }); 
 
    });

<input id='myInput' type='text'> 
 

 
<table id='myTable'> 
 
            
 
            <tr> 
 
    \t \t \t \t \t \t \t \t \t <td>a</td> 
 
             <td>ab</td> 
 
             <td>abs</td> 
 
             <td>ador</td> 
 
             <td>turous</td> 
 
             <td>acac</td> 
 
             <td>accle</td> 
 
    \t \t \t \t \t \t \t \t \t </tr> 
 
    \t \t \t \t \t \t \t \t \t <tr> 
 
            \t <td>ed</td> 
 
             <td>aced</td> 
 
             <td>ate</td> 
 
             <td>acg</td> 
 
             <td>aci</td> 
 
             <td>atic</td> 
 
             <td>ive</td> 
 
\t \t \t \t \t \t \t \t \t </tr> 
 
            <tr> 
 
             \t <td>l</td> 
 
             <td>pt</td> 
 
             <td>able</td> 
 
             <td>ad</td> 
 
             <td>adoent</td> 
 
             <td>ble</td> 
 
             <td>d</td> 
 
            </tr> 
 
            <tr> 
 
            \t <td>ed</td> 
 
             <td>a</td> 
 
             <td>aate</td> 
 
             <td>a</td> 
 
             <td>aavating</td> 
 
             <td>aive</td> 
 
             <td>a</td> 
 
\t \t \t \t \t \t \t \t \t </tr> 
 
            <tr> 
 
            \t <td>d</td> 
 
             <td>ng</td> 
 
             <td>eable</td> 
 
             <td></td> 
 
             <td>alarmed</td> 
 
             <td>ming</td> 
 
             <td>t</td> 
 
            </tr> 
 
            <tr> 
 
             \t <td>ted</td> 
 
             <td>ae</td> 
 
             <td>all</td> 
 
             <td>agjhistic</td> 
 
             <td>akjhkjg</td> 
 
             <td>hjious</td> 
 
             <td>ample</td> 
 
            </tr> 
 
            <tr> 
 
            \t <td>hjbsed</td> 
 
             <td>ahkjng</td> 
 
             <td>anhjkd</td> 
 
             <td>ahjhnt</td> 
 
             <td>ahjkjc</td> 
 
             <td>a</td> 
 
             <td>hjhed</td> 
 
\t \t \t \t \t \t \t \t \t </tr> 
 
            <tr> 
 
            \t <td>aghjed</td> 
 
             <td>hjjal</td> 
 
             <td>ghjmher</td> 
 
             <td>amjhkiue</td> 
 
             <td>ahkjus</td> 
 
             <td>any</td> 
 
             <td>ahmkjehensive</td> 
 
            </tr> 
 
            <tr> 
 
             \t <td>ajhjkjiate</td> 
 
             <td>ahkjpt</td> 
 
             <td>arctic</td> 
 
             <td>arid</td> 
 
             <td>aromatic</td> 
 
             <td>artistic</td> 
 
             <td>ashamed</td> 
 
            </tr> 
 
            <tr> 
 
             <td>assured</td> 
 
             <td>astonishing</td> 
 
             <td>athletic</td> 
 
             <td>attached</td> 
 
             <td>attentive</td> 
 
             <td>atkjkjactive</td> 
 
             <td>ahghbtere</td> 
 
            </tr> 
 
            <tr> 
 
            \t <td>bhkuhish</td> 
 
             <td>hkjh</td> 
 
             <td>bhkre</td> 
 
             <td>barren</td> 
 
             <td>basic</td> 
 
            </tr> 
 
            <tr> 
 
            \t <td>befsgdfgful</td> 
 
             <td>bdsfsdfed</td> 
 
             <td>dsfsdfved</td> 
 
             <td>bedsfsfcial</td> 
 
             <td>better</td> 
 
             <td>best</td> 
 
             <td>bdfsfitched</td> 
 
            </tr> 
 
</table>

我使用這個腳本與HTML表格搜索文本。它有超過500個單元格，如100行和5列等。這個腳本適用於在短表中查找文本，但是當我搜索任何東西時，它也顯示行和列的間隔，如果我有一個超過500細胞。

這裏我試圖用正則表達式如\s和/g但它不起作用，可能是我把它們插在錯誤的地方。此外，我試圖改變cell.style.display = "table-cell";與許多其他風格，但不起作用。

任何一個可以正確引導我什麼和我必須準確無誤地得到輸出沒有行/列的差距，如果我有超過500個單元格和語法描述意味着什麼。

Answer 1

試試這個吧！ =）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="text" class="input"/> 
 
<div class="print"></div> 
 

 
<script> 
 
var data = ['food', 'bar', 'google']; // your data 
 

 
var fx = function(text) { 
 
    var print = function(list,s) { 
 
     var table = $('<table/>').css('width','100%'); 
 
     var x = 0; 
 
     while (list[x]) { 
 
      var tr = $('<tr/>'); 
 
      while (list[x] && x < 5) { 
 
      \t var td = $('<td/>').text(list[x]) 
 
      \t if(s == list[x]){ 
 
      \t \t td.css('background','red'); 
 
      \t } 
 
       tr.append(td); 
 
       x++; 
 
      } 
 
      table.append(tr); 
 
     } 
 
     $('.print').html(table); 
 
    } 
 

 
    if (typeof text === "undefined") { 
 
     print(data, ''); 
 
    } else { 
 
     var find = []; 
 

 
     for (var i = 0; data[i]; i++) { 
 
      if (data[i].toLowerCase().indexOf(text.toLowerCase()) == 0) find[find.length] = data[i]; 
 
     } 
 

 
     print(find,text); 
 
    } 
 
} 
 

 
$(function() { 
 
    $('.input').keyup(function() { 
 
     fx($(this).val()); 
 
    }); 
 
    fx(); 
 
}); 
 
</script>