jQuery从准备好的html表中动态选择数据答案

【问题标题】：jQuery dynamic select data from prepared html tablejQuery从准备好的html表中动态选择数据
【发布时间】：2014-01-31 06:38:32
【问题描述】：

我在从 html 表中选择动态数据时遇到了一些问题。我举了表格和输入的例子，但实际上表格由数百行组成。

<select name="options">
   <option value="equal">=</option>
   <option value="notequal">!=</option>
   <option value="more">></option>
   <option value="less"><</option>
 </select>
 <input type="input" value="input numbers" id="filter">

<table border="1">
<tr>
    <td width="150">NAME</td>
    <td class="wys">Value</td>
    <td>Value2</td>
    <td>Value3</td>
</tr>
<tr>
    <td width="150">Name1</td>
    <td class="wys">65</td>
    <td>87</td>
    <td>988</td>
</tr>...

所以，问题是如何根据输入数据和所选选项隐藏/显示行，假设输入数据引用列 Value

我的第一个解决方案是：

$("#filter").keyup(function() {
     var filter = $("#filter").val();
     var options = $("#options").val();

            if(options == 'equal'){
                 $("table td.wys:contains('" + $(this).val() + "')").parent().show();
                 $("table td.wys:not(:contains('" + $(this).val() + "'))").parent().hide();                

            }
            else if(options == 'notequal'){
                 $("table td.wys:contains('" + $(this).val() + "')").parent().hide();
                 $("table td.wys:not(:contains('" + $(this).val() + "'))").parent().show();                  
            }
            else if(options == 'more'){
                 //HOW TO SHOW/HIDE ROW GREATER THAN eg. 100
            }
            else {
                //HOW TO SHOW/HIDE ROW SMALLER THAN eg. 100 
            }

});

所以我找到了第二个解决方案...

            var wys = $("table td.wys");
            wys.each(function() {
                 $(this).attr('data-wys', parseInt($(this).text())); 
            });

我设置属性并解析为 int 列 VALUE 中的所有值如果我选择相等、不相等、或多或少并按我的数字...，有人可以告诉我如何显示/隐藏表格中的行吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以使用.filter()方法：

// A helper object for doing some math
var operators = {
    'equal':    function(a, b) { return a == b },
    'notequal': function(a, b) { return a != b },
    'more':     function(a, b) { return a > b },
    'less':     function(a, b) { return a < b }
};

var $tr = $('tr').not(':first'),
    $sel = $("select[name='options']").on('change', function() {
       // Trigger the keyup on the select's change event
       $("#filter").keyup();
    });

$("#filter").keyup(function () {
    var v = $.trim(this.value),
        o = $sel.val();

    // Show all the TRs when the value's length is 0
    if (!v.length) return $tr.show();

    $tr.hide().filter(function () {
        var t = $('.wys', this).text();
        return operators[o](t, v);
    }).show();

});

http://jsfiddle.net/q2PVm/1/

【讨论】：