使用javascript从表中搜索数据

Question

我目前正在开发基于JavaScript和PHP的应用程序。在我的应用程序中，我有一个表和一个文本框 - 当我在文本框中输入数据时，表应该显示我键入的特定值。我当前的实现不起作用，因为我不确定如何完成搜索组件 - 任何人都可以帮忙吗？

          <table name="tablecheck" class="DataTable" 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>
       <?php if(isset($records)) : foreach ($records as $row) : ?>
       <tbody>
       <tr id="rowUpdate" class="TableHeaderFooter">
    <td>
     <?php echo anchor('coursemaster_site/delete/'.$row->id, 'Delete',array('onClick'=>"return confirm('ARE YOU WANT TO DELETE..?')")); ?>
    </td>

     <td>
        <input type=checkbox name="editcustomer[] "    id="editcustomer[]"  value="<?php echo $row->id ?>" >

      </td>

      <td >
     <input class="inputwide span2 "    type="text"    onblur="upper(this)"  name="course_code_<?php echo $row->id ?>" id=" course_code_<?php echo $row->id ?>"   value="<?php echo   $row->course_code ; ?> " >

     </td>
     <td>
       <input class="inputmedium span2"    type="text" name="course_name_<?php echo $row->id ?>" id="course_name_<?php echo $row->id ?>" value="<?php echo $row->course_name ; ?>" >

    </td>


    </tr>
</tbody>
   <?php endforeach ; ?>
   <?php endif ; ?>
   </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 rowContainsSearchTerm, fullname;
   var q = document.getElementById("q");
   var v = q.value.toLowerCase();
   var rows = document.getElementsByTagName("tr");
     var searchTermMoreThanTwoCharsLong = v.length > 2; 

       for ( var i = 1; i < rows.length; i++ ) {
    fullname = concatInputValues(rows[i].getElementsByTagName("input"));
    if (fullname) {
        rowContainsSearchTerm = fullname.indexOf(v) > -1;
        if (searchTermMoreThanTwoCharsLong && rowContainsSearchTerm) {
            rows[i].style.backgroundColor = "#00F";
        } else {
            rows[i].style.backgroundColor = "";                
        }
    }
   }
   }

    function concatInputValues(inputs){ 
    var inputContents = "";
    for (var j = 0; j < inputs.length; j++) {
    inputContents = inputContents + inputs[j].value;
     }
   return inputContents;
   }
   </script>

Answer 1

您是否考虑过使用JQuery DataTables？该插件有一个非常好的表格视图以及自动启用的搜索文本框，并且应该很容易适应您的JavaScript / PHP解决方案。

请参阅下面的示例表：