如何使用jquery中的select过滤非结构化表中的所有数据

时间:2015-07-24 12:26:38

标签: javascript jquery html5 dom html-table

我的表在每个tr和td都有不同的数据,所以问题是我如何过滤该表中的数据。 代码结构示例 -

<table id="tableID">
      <tr>
        <td>mar a</td>
        <td>june c</td>
        <td>aug g</td>
        <td>may f</td>
      </tr>
      <tr>
        <td>jan z</td>
        <td>june a</td>
        <td>dec f</td>
        <td>nov e</td>
      </tr>
      <tr>
        <td>b</td>
        <td>y</td>
        <td>a</td>
        <td>aug c</td>
      </tr>
      <tr>
        <td>n</td>
        <td>b</td>
        <td>g</td>
        <td>july a</td>
      </tr>
</table>

我希望用选择选项过滤表。

<select id="sel" name="sel">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="e">e</option>
        <option value="f">f</option>
        <option value="g">g</option>
        <option value="z">z</option>
</select>

这是js脚本

$('tr').hide();
    $('select').change( function(){
        var letter = $(this).val();
        var dataset = $('#tableID').find('tr');
            $.each(dataset, function(x, y){
                var data = $(y).children().slice(0,2);
                    $.each(data, function(a, b){
                        if( $(b).html().substr(0,2) == letter){
                            $(b).parent().show();
                        }
                    });
            });
    });

我如何过滤此表格中的所有 a 。我也使用 tablesorter 和我知道的所有jquery插件,但他们只过滤列或行。

因为我是js的新手,所以请忽略我的错误......

并提前致谢

2 个答案:

答案 0 :(得分:0)

使用jquery .each()函数获取所有td文本并将其文本保存在jquery数组中并使用sort()函数对数组进行排序。之后使用数组数据来创建html选择

答案 1 :(得分:0)

你可以使用这样的东西(给出你发布的html):

$('#sel').on('change', function(){
    var selectedValue = $(this).val();
    $('#tableID').find('td').each(function(){
        if ($(this).text() === selectedValue)
        {
            $(this).show();
        }
        else
        {
            $(this).hide();
        }
    });
});

以下是一个例子:http://jsfiddle.net/u4u36f0k/