javascript - 使用 JS 跟踪 html 表中第一列的搜索值？

Question

这是我的后续问题of this... See here. 我有一个 jscript(由 hex494D49 提供)，从第一列搜索值。

我需要的是，当用户搜索值时，表头也会显示，如果值没有存储。将显示一条消息，类似于“未找到结果”。如何做到这一点？

Here's the JSfiddle file with html

这是 JScript:

document.getElementById('term').onkeyup = function(){
var term = this.value;    
var column = 0;            
var pattern = new RegExp(term, 'g');  
var table = document.getElementById('dataTable');
var tr = table.getElementsByTagName('TR');
for(var i = 0; i < tr.length; i++){
  var td = tr[i].getElementsByTagName('TD');
  for(var j = 0; j < td.length; j++){
    if(j == column && td[j].innerHTML == term){
      console.log('Found it: ' + td[j].innerHTML);
      tr[i].style.display = 'block';
      return;            
      alert('Found it: ' + td[j].innerHTML);
    }else{
      tr[i].style.display = 'none';
    }
  }    
}
};

Answer 1

这将是table标记。如您所见，我添加了 thead、tbody 和 tfoot 组

<!-- search box -->
<input type="text" name="term" id="term" autocomplete = "off" />

<!-- table results -->
<table id="dataTable">
<thead>
    <tr>
        <th>Example No.</th>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th colspan="3"></th>
    </tr>
</tfoot>
<tbody>
<tbody>    
    <tr>
        <td>345678917</td>
        <td>Test 1</td>
        <td>one_test1@gmail.com</td>
    </tr>
    <tr>
        <td>3512376894</td>
        <td>Test 2</td>
        <td>two.test2@hotmail.com</td>
    </tr>
</tbody>
</table>

上述标记的默认 CSS。下一步是将以下内容与 CSS 的其余部分合并。

table thead {
    display: table-row-group;
}

table tbody {
    display: table-row-group;
}

table tbody tr {
    display: none;
}

最后是 JavaScript 片段使用 getElementsByTagName() 方法

// JavaScript
document.getElementById('term').onkeyup = function(){
  var term = this.value;    
  var column = 0;
  var msg = 'No results found!';
  var pattern = new RegExp(term, 'g');  
  var table = document.getElementById('dataTable');
  var tr = table.getElementsByTagName('TR');

  for(var i = 0; i < tr.length; i++){
    var td = tr[i].getElementsByTagName('TD');
    for(var j = 0; j < td.length; j++){
      if(j == column && td[j].innerHTML == term){
        tr[i].style.display = 'table-row';
        table.tFoot.innerHTML = '';  
        return;
      }else{
        tr[i].style.display = 'none';
        table.tFoot.innerHTML = msg;
      }
    }    
  }
};

Working jsFiddle |没有 tfoot jsFiddle

的版本 <小时/>

与上面相同，但使用 rows[] 和 cells[] 集合

HTML

<!-- Search box -->
<input type="text" id="search" autocomplete = "off" />
<!-- Table -->
<table id="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Manufacturer</th>
            <th>Price</th>
            <th>InStock</th>
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>MacBook Air</td>
            <td>Apple</td>
            <td>$456</td>
            <td>85</td>            
        </tr>
        <tr>
            <td>Arc GIS</td>
            <td>ESRI</td>
            <td>$4556</td>
            <td>15</td>                        
        </tr>
        <tr>
            <td>3ds MAX</td>
            <td>Aurodesk</td>
            <td>$6556</td>
            <td>359</td>                        
        </tr>
        <tr>
            <td>Windows 7</td>
            <td>Micorsoft</td>
            <td>$256</td>
            <td>2567</td>                        
        </tr>        
    </tbody>
</table>
<!-- Message -->
<div id="message"></div>

CSS

table thead {
    display: table-row-group;
}
table tbody tr {
    display: none;
}

JavaScript

document.getElementById('search').onkeyup = function(){
    var table = document.getElementById('table'),
        tr = table.rows, td,
        term = this.value.toLowerCase(), column = 0, i, j,
        message = document.getElementById('message');

    for(i = 1; i < tr.length; i++){
        td = tr[i].cells;
        for(j = 0; j < td.length; j++){
            if(j == column && td[j].innerHTML.toLowerCase() == term){
                tr[i].style.display = 'table-row';
                message.innerHTML = '';
                return;
            }else{
                tr[i].style.display = 'none';
                message.innerHTML = 'No results found!';
            }
        }
    }
};

Working jsFiddle 如果您不会在表格中使用 thead 和 tbody，这里是另一个版本 jsFiddle

如果您想搜索所有列，只需更改此行

if(j == column && td[j].innerHTML.toLowerCase() == term){

到这个

if(td[j].innerHTML.toLowerCase() == term){

最后，如果您想要更灵活的搜索，请尝试下面的版本

document.getElementById('search').onkeyup = function(){
    var table = document.getElementById('table'),
        tr = table.rows, td,
        term = this.value.toLowerCase().trim(), column = 0, i, j,
        message = document.getElementById('message'),
        pattern = new RegExp(term, 'gi');

    for(i = 1; i < tr.length; i++){
        td = tr[i].cells;
        for(j = 0; j < td.length; j++){
            if(j == column && term.length > 0 && td[j].innerHTML.match(pattern)){    
                tr[i].style.display = 'table-row';
                message.innerHTML = '';
                return;
            }else{
                tr[i].style.display = 'none';
                message.innerHTML = 'No results found!';
            }
        }
    }
};

Working jsFiddle