table 的实时过滤

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Little Things</title>
<?php echo link_tag('resources/css/style.css'); ?>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="<?php echo base_url('resources/js/script.js');?>" ></script>
      <script type="text/javascript">var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});
</script>
</head>
<body>
<div id="container">
        <div id="top">
        <img id="logo" src="<?php echo base_url('resources/images/logo.jpg'); ?>" alt="litLogo"/>
        </div>
        <div id="main">
        <div id='cssmenu'>
<ul>
   <li class='active'><a href="<?php echo base_url('index.php/LittleController/index');?>"><span>Home</span></a></li>
   <li class="element"><a href='#'><span>Shopping Cart</span></a></li>

   <li class="element"><a href='#'><span>Wish List</span></a></li>


   <li class="element"><a href='#'><span>Contact</span></a></li>
    <li id="name">
    <?php 
        if($this->session->userdata('email'))
        {
            echo "<a href='#'><span>Welcome ".$user."!</span></a>";
        } 
        else 
        {
            echo "<a href='#'><span>Welcome Guest!</span></a>";
        }
         ?>
            <?php
        if($this->session->userdata('email'))
        {
            echo '<li class="element"><a href="'.base_url("index.php/LittleController/logout").'"><span>Logout</span></a></li>';
        } 
        else
        {
            echo '<li class="element"><a href="'.base_url("index.php/LittleController/login").'"><span>Login</span></a></li>';
        }
        ?>
    </li>
       <li class="element"><a href="<?php echo base_url('index.php/LittleController/signup');?>"><span>Sign Up</span></a></li>
</ul>
</div>
<div class="tables" id="tables">
<input type="text" class="search" placeholder="Type to search">
    <?php
     $imgDir="../../resources/images/thumbs/";
        echo "<table id='table'>";
        echo "<tbody class='list'>";
        echo "<tr bgcolor='#E60000'>";
        echo "<th>Name</th><th>Product Line</th><th>Product Scale</th><th>Product Description</th><th>Price</th><th>Image</th>";
        echo "</tr>";
        $i=0;
        foreach($Products as $key => $value)
        {
        $i++;
            if($i%2==0)
            {
                echo "<tr bgcolor='#EE4D4D' width='100%'>";
                //echo '<td>'.$value["ID"].'</td>';
                echo "<td class='pName'>".$value["productName"]."</td>";
                echo "<td class='pLine'>".$value["productLine"]."</td>";
                echo "<td class='pScale'>".$value["productScale"]."</td>";
                echo "<td class='pDes'>".$value["productDescription"]."</td>";
                echo "<td class='buyPrice'>".$value["buyPrice"]."</td>";
                //echo '<td>'.$value["QtySold"].'</td>';
                echo "<td class='image'><img src='".$imgDir.$value['image']."' height='100' width='100'/></td>";
                //echo '<td>'.$value["ABV"].'</td>';
                echo "</tr>";
            }
            else
            {
                echo "<tr bgcolor='#F28080' width='100%'>";
                //echo '<td>'.$value["ID"].'</td>';
                echo "<td class='pName'>".$value["productName"]."</td>";
                echo "<td class='pLine'>".$value["productLine"]."</td>";
                echo "<td class='pScale'>".$value["productScale"]."</td>";
                echo "<td class='pDes'>".$value["productDescription"]."</td>";
                echo "<td class='buyPrice'>".$value["buyPrice"]."</td>";
                //echo '<td>'.$value["QtySold"].'</td>';
                echo "<td class='image'><img src='".$imgDir.$value['image']."' height='100' width='100'/></td>";
                //echo '<td>'.$value["ABV"].'</td>';
                echo "</tr>";
            }
        }
        echo "</tbody>";
        echo "</table>";

    ?>
    </div>
    <script type="text/javascript">
    var options = {
  valueNames: [ 'pName', 'pLine', 'pScale', 'pDes', 'buyPrice','image' ]
};

var userList = new List('tables', options);</script>
        </div>
        </div>
</body>

</html>

所以这是我的代码。当我在文本框中输入内容时，我正在尝试过滤 table。任何帮助表示赞赏。

我尝试按照教程进行操作，但它们似乎根本不起作用...有什么想法吗？

我觉得很难理解和应用到我自己的网站上，我的过滤代码是从网上拿来的。

Answer 1

我看到您正在使用 jQuery 那么为什么不使用包含 select 或？您可以在 select 标签上的 keyUp 事件后使用它：

$("#search").keyup(function(){
  var search = this.value;
  $('#table tr, #table th').show();
  $('#table td:contains('+search+')').each(function(){
     $(this).parent().hide();
  });
});

此代码将隐藏任何具有包含输入值的子 td 的父单元格 (tr, th...)。您可以使用此代码并使其更符合您的需求。

Fiddle 示例：http://jsfiddle.net/uby9quLo/2/

希望对您有所帮助！

table 的实时过滤

Real time filtering of a table

html

javascript

css

php

jquery