0

私は現在javascriptに取り組んでいます。このコードには、テーブルとテキスト ボックスがあります。テキストボックスにデータを入力すると、入力した特定の値が表示されるはずですが、テーブルからデータを検索しません。テーブル内のデータを検索するにはどうすればよいですか?以下のリンクを提供しました。

http://jsfiddle.net/SuRWn/ 

       <table name="tablecheck" class="Data" id="results" >
      <thead>
    <tr ><th>&nbsp;</th>
        <th>&nbsp;</th>
        <th><center> <b>COURSE CODE</b></center></th>
    <th><center>COURSE NAME</center></th></tr>
      </thead>

        <tbody>
        <tr id="rowUpdate" class="TableHeaderFooter">
        <td>
            <center> <input    type="text"    name="input"    value="course" ></center>
            <center> <input    type="text"    name="input"    value="course1" ></center>
            <center> <input    type="text"    name="input"    value="course2" ></center>
        </td>
        <td>
            <center> <input    type="text"    name="input"    value="subject" ></center>
            <center> <input    type="text"    name="input"    value="subject1" ></center>
            <center> <input    type="text"    name="input"    value="subject2" ></center>

        </td>


          </tr>

           </tbody>

         </table >
         <form action="#" method="get" onSubmit="return false;">
           <label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" /> 
         </form>

      <script>
function doSearch() {
    var q = document.getElementById("q");
    var v = q.value.toLowerCase();
    var rows = document.getElementsByTagName("tr");
    var on = 0;
    for (var i = 0; i < rows.length; i++) {
        var fullname = rows[i].getElementsByTagName("td");
        fullname = fullname[0].innerHTML.toLowerCase();
        if (fullname) {
            if (v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) {
                rows[i].style.display = "";
                on++;
            } else {
                rows[i].style.display = "none";
            }
        }
    }

}
4

3 に答える 3

0

あなたのhtmlはあなたが望んでいた方法ですか？行を含むテーブルを作成し、ユーザーの入力に基づいてそれらの行をフィルタリングしたいようです。あなたのhtmlが今のように、1行しかありません。

それを修正したら、jquery を使用することをお勧めします。始めるためのフィドルは次のとおりです。http://jsfiddle.net/SuRWn/11/

$(function () {
    var q = $('#q'),
        boxes = $('td input');

    $('#q').on('keyup', function (e) {
        var qterm = q.val();

        if (qterm.length < 3) {
            boxes.show();
        } else {
            boxes.each(function(i,o) {
                var box = $(this);
                box.toggle(box.val().indexOf(qterm) > -1);
            });
        }
    });
});

編集： フィドルが入力ボックスをフィルタリングしていることに注意してください（フィルタリングする行がないため）

于 2013-08-13T10:24:06.350 に答える