Question

我写了几行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？

Answer 1

我会建议一个不同的方法，但是基于你的代码，而不是太过于复杂的事情：

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

将input元素传递给函数可以保存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

只是玩一点，BTW this site对于像这样的东西来说是一个很棒的沙箱

在纯JavaScript中隐藏/显示元素

1 个答案: