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

的内容

页内结果实时搜索

1 个答案: