0

当用户在文本框中键入文本时，我希望突出显示与文本框值匹配的所有表格单元格值...。

<input type="text" id="txtsearch"/>  
<html>
<table id="table" style="height:350px;margin-left:1em;width:700px;">
    <!--this is my table header-->
    <tr style="display:table-row">
        <th class="checkbox"><input type="checkbox"/></th>
        <th class="Name">NAME</th>
        <th class="Score">SCORE</th>
        <th class="Email">EMAIL</th>
        <th class="Empty"></th>
    </tr>
    <tr>
        <!--tabledata-->
        <td ><input type="checkbox" /></td>
        <td >Vijay Prakash</td>
        <td >34</td>
        <td >vijay@gmail.com</td>
        <td ></td>
    </tr>
</table>
<input type="button" id="btnCalculate" value="Calculate"/>
<label>Average:</label>
<label id="lblAverage"></label>
<label>Max:</label>
<label id="lblMax"></label>
</form>
</html>   
</div>
4

2 回答 2

1

假设您的文本框具有“文本框”ID，并且选定的单元格将使用“突出显示”CSS 类：

$('#textbox').on('change', function() {
  var textboxValue = $('#textbox').val();
  $('#table td').each(function() {
    if ($(this).text() === textboxValue) {
      $(this).addClass('highlight');
    } else {
      $(this).removeClass('highlight');
    }
  });
});

在jsFiddle上查看它的实际效果。

如果您需要它进行部分匹配，请替换if为以下内容：

if ($(this).text().indexOf(textboxValue) !== -1) {

如果您需要匹配从头开始的字符串（而不是在另一个字符串内部，如上面的示例），请使用以下命令：

if ($(this).text().indexOf(textboxValue) === 0) {
于 2013-05-02T09:15:18.487 回答
0

尝试这个：

$(function(){
console.log('');
$('#txtsearch').on('input', function() {
  var textboxValue = $('#txtsearch').val();
  if(textboxValue.length>0)
  {
  $('#table td').each(function() {
    var filter = textboxValue.toString().toUpperCase();
    if ($(this).html().toString().toUpperCase().indexOf(filter) > -1) {
      $(this).addClass('highlight');
    } else {
      $(this).removeClass('highlight');
    }
  });
  }
  else
  {
  $('#table td').removeClass('highlight');
  }
});
});
.highlight
{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtsearch"/>  
<table id="table">
    <tr>
        <th>NAME</th>
        <th>SCORE</th>
        <th>EMAIL</th>
    </tr>
    <tr>
        <td >Vijay Prakash</td>
        <td >34</td>
        <td >vijay@gmail.com</td>
    </tr>
    <tr>
        <td >Neeraj Pathak</td>
        <td >100</td>
        <td >npathak56@gmail.com</td>
    </tr>
</table>

于 2017-07-30T10:33:58.910 回答