HTML表格搜索單元格

Question

我一直在尋找一個代碼來搜索一個表格並顯示一個單元格。保持努力做我自己的，並最終找到一個完美的作品，除了一件事。當搜索欄被清空時，它顯示第一個單元格，我不知道如何製作它，因此它可以返回到顯示整個表格。

下面是代碼和任何幫助，真的很感激。

var cells = document.querySelectorAll("#myTable td"); 
 
    var search = document.getElementById("myInput"); 
 

 
    search.addEventListener("keyup", function() { 
 

 
     for (var i = 0; i < cells.length; ++i) { 
 
      if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
       cells.forEach(function(element) { 
 
        element.style.display = "none"; 
 
       }); 
 
       cells[i].style.display = "table-cell"; 
 
       break; 
 
      } else { 
 
       cells.forEach(function(element) { 
 
        if (cells[i] !== element) { 
 
         element.style.display = "table-cell"; 
 
        } 
 
       }); 
 
      } 
 
     } 
 

 
    });

<input id="myInput"> 
 
<table id="myTable"> 
 
    <tr> 
 
     <td>asd</td> 
 
     <td>dsa</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123</td> 
 
     <td>321</td> 
 
    </tr> 
 
    <tr> 
 
     <td>412</td> 
 
     <td>124</td> 
 
    </tr> 
 
</table>

而這裏的工作中的代碼，你可以看到我的問題是什麼：https://jsfiddle.net/y1wof1go/

Answer 1

當在輸入框中輸入任何內容（長度爲零或空字符串），你需要做的所有細胞的表可見一次。 這是一個fiddle。

和更新功能：

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 
    if (search.value.length > 0 && search.value != '') { 
 
     for (var i = 0; i < cells.length; ++i) { 
 
      if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
       cells.forEach(function(element) { 
 
        element.style.display = "none"; 
 
       }); 
 
       cells[i].style.display = "table-cell"; 
 
       break; 
 
      } else { 
 
       cells.forEach(function(element) { 
 
        if (cells[i] !== element) { 
 
         element.style.display = "table-cell"; 
 
        } 
 
       }); 
 
      } 
 
     } 
 
    } else { 
 
     cells.forEach(function(element) { 
 
      if (cells[i] !== element) { 
 
       element.style.display = "table-cell"; 
 
      } 
 
     }); 
 

 
    } 
 
});

<input id="myInput"> 
 
<table id="myTable"> 
 
    <tr> 
 
     <td>asd</td> 
 
     <td>dsa</td> 
 
    </tr> 
 
    <tr> 
 
     <td>123</td> 
 
     <td>321</td> 
 
    </tr> 
 
    <tr> 
 
     <td>412</td> 
 
     <td>124</td> 
 
    </tr> 
 
</table>

Answer 2

因此，要確保該表返回到默認狀態，當搜索是空的附加if語句檢查搜索欄是否爲空。如果該欄爲空，則將所有表格元素重新設置爲以正常table-cell樣式顯示。

var cells = document.querySelectorAll("#myTable td"); 
 
var search = document.getElementById("myInput"); 
 

 
search.addEventListener("keyup", function() { 
 

 
    for (var i = 0; i < cells.length; ++i) { 
 
    if (cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) { 
 
     cells.forEach(function(element) { 
 
     element.style.display = "none"; 
 
     }); 
 
     cells[i].style.display = "table-cell"; 
 
     break; 
 
    } else { 
 
     cells.forEach(function(element) { 
 
     if (cells[i] !== element) { 
 
      element.style.display = "table-cell"; 
 
     } 
 
     }); 
 
    } 
 
    } 
 
    if (search.value == "") { 
 
    cells.forEach(function(element) { 
 
     if (cells[i] !== element) { 
 
     element.style.display = "table-cell"; 
 
     } 
 
    }); 
 
    } 
 

 
});

<input id="myInput"> 
 
<table id="myTable"> 
 

 
    <tr> 
 
    <td>asd</td> 
 
    <td>dsa</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>123</td> 
 
    <td>321</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>412</td> 
 
    <td>124</td> 
 
    </tr> 
 

 
</table>

Answer 3

當您需要重置任何平臺上的所有項目，它往往是最好的執行毯復位到原來的狀態：

search.addEventListener('keyup', function() 
{ 
    if (search.value.length > 0 && search.value != '') 
    { 
     for (var i = 0; i < cells.length; ++i) 
     { 
      if(cells[i].textContent.toLowerCase().indexOf(search.value.toLowerCase()) === 0) 
      { 
       cells.forEach(function(element) 
       { 
        element.style.display = 'none'; 
       }); 
       cells[i].style.display = 'table-cell'; 
       break; 
      } 
      else 
      { 
       cells.forEach(function(element) 
       { 
        if (cells[i] !== element) 
        { 
         element.style.display = 'table-cell'; 
        } 
       }); 
      } 
     } 
    } 
    else 
    { 
     cells.forEach(function(element) 
     { 
      if (cells[i] !== element) 
      { 
       element.style.display = 'table-cell'; 
      } 
     }); 
}