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(); 
    }

jQueryではなくJavaScriptでこの関数を書く方法は？

4

1 に答える 1

3

まとめて別のアプローチをお勧めしますが、コードに基づいており、物事を複雑にしすぎないようにします。

<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

ちょっと遊んでみてください、ところで、このサイトはこのようなもののための素晴らしいサンドボックスです

于 2012-10-09T09:05:24.577 に答える