3

我写了几行 jQuery 代码，但不知道如何在纯 JavaScript 中实现这一点。该输出：

echo "<tr id='perf_row' class='table_header_tr' name='tr_$row_fio_perf[0]'>
          <td class='table_header_td' name='td_$i'>
          $i
          </td>
      <tr>";

搜索输入。当用户输入字符时，表行（输出较高）必须隐藏并仅显示与搜索词匹配的内容。

<input type="text" onkeyup="showPerformers();" id="ShowSearchPerformers">

  function showPerformers(){      
            var search_login = $('#ShowSearchPerformers').val();
            search_login = search_login.toLowerCase();               
            $('tr[name^=tr_]').hide();
            var search = 'tr[name*=' + search_login+']';
            $(search).show(); 
    }

如何用 JavaScript 而不是 jQuery 编写这个函数？

4

1 回答 1

3

我会建议一种不同的方法，但要根据您的代码，而不是使事情过于复杂：

<input type="text" onkeyup="showPerformers(this,event);" id="ShowSearchPerformers">

将输入元素传递给函数会保存 DOM 扫描（getElementById或在 jQuery 中$('#id')）。给定时间，传递事件对象也可能很有用。

function showPerformers(search_login,e)
{
     search_login = search_login.value.toLowerCase();
     var table = document.getElemebtById('YourTblId');
     var row = table.getElementsByTagName('tr');
     var nameSearch = new RegExp('^tr_' + search_login);
     for (var i=0;i<row.length;i++)
     {
         if (row[i].name.substr(0,3) === 'tr_')
         {
             row[i].style.display = '';//make previously hidden rows visible again
             if(!row[i].name.match(nameSearch))
             {//row name starts with tr_, but not tr_[searched number]
                 row[i].style.display = 'none';
             }
         }
     }
}

如果我没记错的话，这应该可以工作，并且可以按照您的预期执行。虽然它确实需要一些微调，但我不想破坏你的乐趣:)。只是一个提示，就目前而言，您不能保证用户输入是数字的：a例如，输入会隐藏所有行，并且不显示任何行。您可以通过以下任一方式解决此问题：

value.replace(/[^0-9]/g,'');//leaves only numbers
Math.floor(parseFloat(value));//Math.floor(parseFloat(' 123.1s')) --> 123

玩一点，顺便说一句，这个网站是一个很棒的沙盒，可以存放这样的东西

于 2012-10-09T09:05:24.577 回答