HTML-таблицы с фильтрацией jQuery

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 отображалась или скрывалась.

Так что, если я наберу 63-е в поле «to», а можжевельник в поле «from», мне понадобятся только те два trs / tds, которые отображаются в этом порядке, и ни одного из остальных.

Answer 1

Не изменяя свой код, вы можете попробовать это. Это скроет столбцы, у которых нет совпадения, но не изменит их порядок. Он также скрывается, только если найдено два или более совпадения столбцов. По правде говоря, вы должны публиковать только те материалы, где вам нужна помощь в решении проблемы, которую вы уже предприняли, а не то, чтобы кто-то другой делал эту работу за вас.

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

Answer 2

Я собрал немного демо этого кодового блока, но он работает для этого конкретного случая:

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

  });
});