使用JS跟踪html表中第一列的搜索值？ [英] Follow-up of search values from first column in html table using JS?

问题描述

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

This is my follow-up question of this... See here. I have a jscript(courtesy of hex494D49), searching values from first column.

我需要的是，当用户搜索值时，表头也会显示，如果值不存储。有一条消息将显示如下未找到结果。怎么做？

All I need is, when the values is searching by the user, the table headers will also displayed and if the values is not store. There's a message will display like this "No results found". How to do that?

这是JSfiddle文件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';
    }
  }    
}
};

推荐答案

这将是表标记。如你所见，我添加了 thead ， tbody 和 tfoot 群组

This would be the table markup. As you can see, I added thead, tbody and tfoot groups

<!-- 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>[e-mail]</td>
    </tr>
    <tr>
        <td>3512376894</td>
        <td>Test 2</td>
        <td>[e-mail]</td>
    </tr>
</tbody>
</table>

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

Default CSS for the markup above. Next step would be merging the following with the rest of your CSS.

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

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

table tbody tr {
    display: none;
}

最后JavaScript代码段使用getElementsByTagName（）方法

And finally the JavaScript snippet using getElementsByTagName() method

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

工作jsFiddle |版本没有 tfoot jsFiddle

与上述相同，但使用rows []和cells [] collection

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

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

工作jsFiddle 如果您不在表格中使用 thead 和 tbody ，则另一个版本 jsFiddle

Working jsFiddle If you won't use thead and tbody in your table here is another version jsFiddle

我想要全部搜索列，只需更改此行

I case you want to search all columns, just change this line

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

到这一个

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

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

And finally, if you want to have more flexible search try the version below

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

工作jsFiddle

这篇关于使用JS跟踪html表中第一列的搜索值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！