0

我需要一个搜索框，它会像 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 搜索表格行吗？

4

1 回答 1

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);

于 2014-08-05T08:11:14.607 回答