如何筛选表并仅显示值而不是值？

Question

正在处理一个包含表格网格数据的简单html应用程序。

考虑如下样本数据。

no  name  department
1   abc   IT
2   def   CSE

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

许多jquery表允许我按如下方式实现搜索逻辑：

假如我将搜索键设为＆＃39; abc＆＃39;它将显示过滤表如下

no name department
1  abc  IT

在上述情况下，它会显示特定于＆＃39; abc＆＃39;的整行。当我提供IT＆＃39; IT＆＃39;或者＆＃39; 1＆＃39;同样。

我的问题是......

我不想显示具有匹配搜索键的已过滤行，而是只显示具有匹配搜索键的已过滤单元格，如下所示：

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

name
abc

你可以在here

上找到一个等效的Jsfiddle实例

Answer 1

demo：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());
                        }
                    }
                }
            });
        }

<强>输出

department
IT

Answer 2

尝试以下代码。把这个脚本放在＆＃34; head＆＃34;部分：

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