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'; 
      } 
     }); 
}