带有 jQ​​uery 过滤的 HTML 表格

Question

假设我有...

<form action="#">
    <fieldset>
        to:
        <input type="text" name="search" value="" id="to" />
        from:
        <input type="text" name="search" value="" id="from" />
    </fieldset>
</form>
<table border="1">
    <tr class="headers">
        <th class="bluedata"height="20px" valign="top">63rd St. &amp; Malvern Av. Loop<BR/></th>
        <th class="yellowdata"height="20px" valign="top">52nd St. &amp; Lansdowne Av.<BR/></th>
        <th class="bluedata"height="20px" valign="top">Lancaster &amp; Girard Avs<BR/></th>
        <th class="yellowdata"height="20px" valign="top">40th St. &amp; Lancaster Av.<BR/></th>
        <th class="bluedata"height="20px" valign="top">36th &amp; Market Sts<BR/></th>
        <th class="yellowdata"height="20px" valign="top">Juniper Station<BR/></th>
    </tr>
    <tr>
        <td class="bluedata"height="20px" title="63rd St. &amp; Malvern Av. Loop">
            <table width="100%">
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:47am</td>
                </tr>
            </table>
        </td>
        <td class="yellowdata"height="20px" title="52nd St. &amp; Lansdowne Av.">
            <table width="100%">
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:47am</td>
                </tr>
            </table>
        </td>
        <td class="bluedata"height="20px" title="Lancaster &amp; Girard Avs">
            <table width="100%">
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:47am</td>
                </tr>
            </table>
        </td>
        <td class="yellowdata"height="20px" title="40th St. &amp; Lancaster Av.">
            <table width="100%">
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:47am</td>
                </tr>
            </table>
        </td>
        <td class="bluedata"height="20px" title="36th &amp; Market Sts">
            <table width="100%">
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:47am</td>
                </tr>
            </table>
        </td>
        <td class="bluedata"height="20px" title="Juniper Station">
            <table width="100%">
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:17am</td>
                </tr>
                <tr>
                    <td>12:47am</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

现在根据在文本框中输入的数据，我需要显示或隐藏表格 trs/tds。

因此，如果我在“to”框中输入 63rd，并在“from”框中输入 juniper，则我只需要按该顺序显示的这两个 trs/td，其他都不需要。

Answer 1

我把这个代码块的一点demo 放在一起，但它适用于这个特定的情况：

$(function() {
  $('#to,#from').bind('keyup change', function() {
    var to = $('#to').val().toLowerCase();
    var from = $('#from').val().toLowerCase();
    var $th = $('#theTable').find('th');
    // had to add the classes here to not grab the "td" inside those tables
    var $td = $('#theTable').find('td.bluedata,td.yellowdata');

    if (to.length == 0 || from.length == 0) {
      // shortcut - nothing set, show everything
      $th.add($td).show();
      return;
    }

    $th.add($td).hide();
    $th.each(function(idx) {
      var txt = $(this).text().toLowerCase();
      if ((txt.indexOf(to) != -1) || (txt.indexOf(from) != -1)) {
        // the text had the to or the from in it - so show this tr
        $(this).show();
        // and show its corresponding td
        $td.eq(idx).show();
      }
    });

  });
});

Answer 2

在不更改代码的情况下，您可以试试这个。它将隐藏没有匹配但不会更改其顺序的列。它也仅在找到两个或更多列匹配时才会隐藏。事实上，您应该只发布需要帮助解决您已经尝试过的问题的内容，而不是让其他人为您完成工作。

<script type="text/javascript">/* <![CDATA[ */
function tableFilter()
{ // show / hide table data based in search filters
    var loop=0, cnt=0, idx=[], obj, txt1=$("#to").val().toLowerCase(), txt2=$("#from").val().toLowerCase();
    $("table:eq(0) tr.headers th").each(function(){ // for each header description
        if ($(this).parents("table").length < 2) {
            if (txt1 != "" && $(this).html().toLowerCase().indexOf(txt1) != -1) { cnt++; idx[loop] = true; }
            if (txt2 != "" && $(this).html().toLowerCase().indexOf(txt2) != -1) { cnt++; idx[loop] = true; }
            loop++;
        }
    });
    if (txt1 != "" && txt2 != "" && cnt > 1) { // filter display of cells if 2 or more matches found
        loop = 0;
        $("table:eq(0) tr.headers th").each(function(){
            if ($(this).parents("table").length < 2) {
                $(this).css("display", (idx[loop]==true)? "" : "none"); // hide/show cell
                loop++;
            }
        });
        loop = 0;
        $("table:eq(0) td").each(function(){
            if ($(this).parents("table").length < 2) {
                $(this).css("display", (idx[loop]==true)? "" : "none"); // hide/show cell
                loop++;
            }
        });
    }
    else { $("table:eq(0) th, table:eq(0) td").css("display", ""); } // show all cells
}
$(document).ready(function(){
    $("#to, #from").keyup(tableFilter);
});
/* ]]> */</script>