頁內結果實時搜索

Question

我需要一個搜索框，該搜索框會像CTRL + F的工作原理一樣引發結果。 現在，在我的index.php頁面上，我使用ff格式：

<table width="100%">
<thead>
<tr>
<th><strong>Client Name:</strong></th>
<th><strong>Nationality:</strong></th>
<th><strong>Birthday:</strong></th>
<th><strong>Address:</strong></th>
<th><strong>Gender:</strong></th>
<th><strong>Birthplace:</strong></th>
</tr>
</thead>
<?php

$sql=mysql_query(" select * from tenant order by id asc");
$count=0;
while($row=mysql_fetch_array($sql))
    {
    $client_id  =   $row['id'];
    $clientName =   $row['cname'];
    $cbday      =   $row['bday'];
    $cadd       =   $row['address'];
    $cgender    =   $row['gender'];
    $cbirth     =   $row['birthplace'];

        if($count%2)
        {
        ?>
        <tbody>
        <?php } else { ?>
        <tr id="<?php echo $id; ?>">
        <?php } ?>
        <td>
        <span class="text"><?php echo $client_id.".  ".$clientName; ?></span>
        </td>
        <td>
        <span class="text"><?php echo $cbday; ?></span> 
        </td>
        <td>
        <span class="text"><?php echo $cadd; ?></span>
        </td>
        <td>
        <span class="text"><?php echo $cgender; ?></span>
        </td>
        <td>
        <span class="text"><?php echo $cbirth; ?></span>
        </td>
        </tr>
        </tbody>
    <?php
    $count++;
    }//while-end
    ?>
 </table>

我已經嘗試過許多JQuery和Ajax教程，但是似乎都沒有一個值能很好地工作。 因此，我得出的結論是，也許只有當您為表行設置了預定義的值時，這些教程才能起作用。 像這樣一個例子：

<th>ClientName</th>

無論如何，我可以在索引頁上進行類似於CTRL + F的表行搜索嗎？

Answer 1

Javascript，尤其是與jQuery結合使用，非常容易學習和理解。 無需插件或教程。

如何搜索表格？

這是我剛剛為您編寫的jsfiddle：

http://jsfiddle.net/j9U52/

$('#search-submit').on('click', function(event) {
    var v = $('#search-value').val(); // get the search value
    var t = $('.searchable td'); // WHERE to search
    var c = 'highlight'; // css class to add to the found string

    // for each td in the table
    $.each(t, function(idx, el) {
        // find the keyword
        var regex = new RegExp("\\b" + v + "\\b", "gi");

        // replace it and add a span with the highlight class
        el.innerHTML = el.innerHTML.replace(regex, function(matched) {
            return "<span class=\"" + c + "\">" + matched + "</span>";
        });
    });
});

當您輸入新的搜索關鍵字時，我沒有添加重置突出顯示的匹配項的t.removeClass(c); ，我將其留給您:-)提示：添加類似t.removeClass(c);