javascript - SearchingThrough 使用输入标签的表

Question

我正在尝试搜索一个表格，该表格在没有输入标签的情况下也能正常工作，但是我想将输入标签保留在表格单元格中。我已尝试使用 td.firstElementChild.value 但这不起作用....我需要修复什么才能搜索表格？

这是我的 fiddle :https://jsfiddle.net/Souleste/1fxxzoe7/114/

Answer 1

一个解决方案是包含一个公共(public)类名，供所有输入元素使用。

您在创建输入控件时已经这样做了:

input1.className = 'input';

虽然，我建议使用更具描述性的类名，但只要类名对于页面上的输入控件是唯一的，两者都可以工作:

input1.className = 'search-input';

您还已经为每个 TR(行)元素设置了唯一 ID。

tr.id = 'row' + rowCount;

将此 id 添加为 input 元素上的 data- 属性，如下所示:

input1.setAttribute('data-tr-id', 'row' + rowCount);

现在，通过 className 获取输入并检查值:

var inputElements = document.getElementsByClassName('search-input');
inputElements.foreach(function(item, index){
     var value = item.value;
     // use the data-tr-id attribute to find the TR element to hide/show
     var trElementId = item.getAttribute('data-tr-id');
     var trElement = document.getElementById(trElementId);
     // do the value comparison and hide/show as needed
     if (value.toUpperCase().indexOf(filter) > -1) {
         tr.style.display = '';
     } else {
         tr.style.display = 'none';
     }
});