如何过滤表格和仅显示 <td> 价值比 <tr> 值？

Question

我正在开发一个具有表格网格数据的简单html应用程序。

考虑如下样本数据。

no  name  department
1   abc   IT
2   def   CSE

考虑我有一个搜索框，它将获得一个搜索键并显示一个过滤的表视图。

很多jquery表允许我实现搜索逻辑，如下所示：

假设我将搜索键设为'abc'，它将显示过滤后的表格，如下所示

no name department
1  abc  IT

在上面的例子中，它显示特定于'abc'的整行，当我给'IT'或'1'时，将显示相同的整行。

我的问题是......

我没有显示具有匹配搜索键的过滤行，而是希望仅显示具有匹配搜索键的过滤单元格，如下所示：

假设我将搜索键设为'abc'，它应该显示过滤表，如下所示：

name
abc

你可以在这里找到一个等效的Jsfiddle实例

Answer 1

演示： http ： //jsfiddle.net/cnvrP/12/ （firefox）
HTML

    <input id="searchkey">
    <div id="maindiv">

<table id="mytble">
    <tr>
        <th>no</th>
        <th>name</th>
        <th>department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>a</td>
        <td>IT</td>
    </tr>
    <tr>
        <td>2</td>
        <td>b</td>
        <td>CSE</td>n
    </tr>
</table>
        <div>

JQUERY

var $mytbl;
var found = false;
$(document).ready(function () {
    $mytbl = $('#mytble').clone();
    $("#searchkey").keyup(function () {
        found = false;
        var key = $(this).val();
        search(key);
    });
});

        function search(key) {
            $mytbl.find('td').each(function (i, v) {
                if (key && $(v).html().contains(key)) {
                    var $th = $mytbl.find('th').eq($(v).index());
                    var $tbl = $('<table />');
                    $tbl.append('<tr><th>' + $th.html() + '</th></tr>');
                    $tbl.append('<tr><td>' + $(v).html() + '</td></tr>');

                    $('#mytble').html('');
                    $('#mytble').html($tbl.html());
                    found = true;
                }
                else {
                    if (!found) {
                        if (!key) {
                            $('#mytble').html('');
                            $('#mytble').html($mytbl.html());
                        }
                        else {
                            var $tbl = $('<table />');
                            $tbl.append('<tr><th>' + 'Result' + '</th></tr>');
                            $tbl.append('<tr><td>' + 'No matching records found' + '</td></tr>');

                            $('#mytble').html('');
                            $('#mytble').html($tbl.html());
                        }
                    }
                }
            });
        }

OUTPUT

department
IT

Answer 2

请尝试以下代码。 将此脚本放在“head”部分：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script>
    $(document).ready(function () {
        $("#searchInput").keyup(function () {
            var val = $(this).val();
            $("#searchTable tr:first th").hide();
            $("#searchTable tr td").each(function (i) {
                var content = $(this).text();
                if (content.toLowerCase().indexOf(val) == -1) {
                    $(this).hide();
                } else {
                    var l = $(this).index();
                    $(this).show();
                    $(this).parents("table").find("tr:first th:eq(" + l + ")").show();

                }
            });
        });
    });
</script>

让我们假设您的HTML看起来像：

   <div>
        <input type="text" id="searchInput" />
        <table id="searchTable">
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Department</th>
            </tr>
            <tr>
                <td>1</td>
                <td>abc</td>
                <td>IT</td>
            </tr>
              <tr>
                <td>2</td>
                <td>aaa</td>
                <td>School</td>
            </tr>

              <tr>
                <td>3</td>
                <td>bbb</td>
                <td>Payment</td>
            </tr>

              <tr>
                <td>4</td>
                <td>ccc</td>
                <td>Account</td>
            </tr>
        </table>
    </div>