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

这是我的后续问题，我有一个jscript（由HEX4949提供），从第一列搜索值

我所需要的是，当用户搜索值时，也会显示表头，如果没有存储值，则会显示表头。将显示这样一条消息“未找到结果”。怎么做

下面是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';
    }
  }    
}
};

document.getElementById（'term'）。onkeyup=function（）{
var项=该值；
var列=0；
var模式=新的RegExp（术语“g”）；
var table=document.getElementById（'dataTable'）；
var tr=table.getElementsByTagName（'tr'）；
对于（变量i=0；i

这将是

表

标记。如您所见，我添加了

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>

最后是使用getElementsByTagName（）方法的JavaScript片段

// 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;
      }
    }    
  }
};

CSS

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

对这个

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

document.getElementById（'search'）。onkeyup=function（）{
var table=document.getElementById（'table'），
tr=表行数，td，
term=this.value.toLowerCase（）.trim（），column=0，i，j，
message=document.getElementById（'message'），
模式=新的RegExp（术语“gi”）；
对于（i=1；i0&&td[j].innerHTML.match（pattern））{
tr[i].style.display='table row'；
message.innerHTML=''；
返回；
}否则{
tr[i].style.display='none'；
message.innerHTML='未找到任何结果！'；
}
}
}
};

---

表有一个集合，每行有一个集合，因此不需要getElementsByTagName。表格行的默认style.display属性在某些浏览器中是block，但在大多数浏览器中是table row。@RobG因此我将该块更改为table row，现在它可以正确显示。我怎样才能同时显示表格标题？我明白了。我将修改代码并很快返回新版本。上面提出的有关

显示

属性的建议是正确的，我将其更改为

表行

。正如我之前所说，在最初的回答中，表的行和列可以被

行

和

单元格

集合引用，但它们也可以被

getElementsByTagName（'TR'）

和

getElementsByTagName（'TD'）

方法引用，这很好。但是，我将同时使用

行

和

单元格

添加版本。@User014019如您所见，我稍微更改了

表

标记。我不确定你是否能够在你的项目中改变它；如果没有，让我知道我会用另一种方式去做；但是我们可以说，这是一个适当的

表

标记，它具有

标题

、

正文

和

页脚

。所以，试试看，让我知道是否一切都好<代码>这

3

这是您的表格列数这就是我所需要的！谢谢你+1@User014019哦，对不起！忘记了JSFIDLE不会自动更新东西。在这里，并更新了答案。@User014019是的，如果您不能控制（动态）表，第二个可能会更好；对于

tfoot

，它也不需要额外的CSS。我要休息一个小时；测试，玩转代码。。。如果你需要改进或改变什么，请告诉我。正如我所说，在此期间，我将使用

行

和

单元格

添加版本。

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

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