Question

我正在使用此代码来过滤搜索。我试图只使用.filter类来获取我想要过滤的2列。问题是脚本现在要求文本在两列中匹配，以便过滤结果。我该怎么做才能从任一列找到结果，而不是两者都找到？

$(document).ready(function() {
    var $rows = $('#orders tbody .filter');
    $('#filtersearch').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.closest('tr').show().end().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).closest('tr').hide();
    });
    $('#filtersearch').keyup();
});

带有数据的表

<table border="0" align="center" cellpadding="5" cellspacing="0" id="orders">
<thead>
<tr>
<th colspan="6">
            <form name"searchfilter">
            <input type="text" id="filtersearch" name="filtersearch" placeholder="Search by name or phone number" value="<?php echo $search; ?>">
            </form>
            </th>
</tr>
<tr>
<th width="15%">Date</th>
<th width="30%">Name</th>
<th width="30%">Phone</th>
<th width="15%">Location</th>
<th width="10%">Picked Up</th>
</tr>
</thead>
<tbody>
<?php
/* 
        VIEW.PHP
        Displays all data from 'players' table
*/

        // connect to the database
        include('connect-db.php');


        // get results from database
        $result = mysql_query("SELECT * FROM orders") 
                or die(mysql_error());  


        // loop through results of database query, displaying them in the table
        while($row = mysql_fetch_array( $result )) {
     $src = '';
     switch( $row['Location'] ) {
          case '1':
              $src = 'images/rear_icon.png';
              break;
          case '2':
              $src = '2.jpg';
              break;
          default:
              $src = 'default.jpg';

            }      // echo out the contents of each row into a table
                echo "<tr>";
                echo '<td>' . $row['date'] . '</td>';
                echo '<td class="filter">' . $row['Name'] . '</td>';
                echo '<td class="filter">' . $row['Phone'] . '</td>';
                echo '<td><img src="'.$src.'"></td>';
                echo '<td><a href="delete.php?id=' . $row['id'] . '"><img src="images/icons/checkmark.png"></a></td>';
                echo "</tr>"; 
        } 


?>
</tbody>
</table>

Answer 1

你可以替换

    $rows.closest('tr').show().end().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).closest('tr').hide();

带

   $rows.closest('tr').hide().each(function(){
       if ($('td', this).filter(function(){
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return text.indexOf(val)!=-1; // too much wine to play with ~ things
       }).length>0) $(this).show();
   })

个人评论：命名$rows单元格不会使代码更易于阅读和修复。

Jquery搜索过滤器

1 个答案: