jQuery动态选择表

时间:2014-02-05 07:59:20

标签: javascript jquery html

有例子:http://jsfiddle.net/pVP6w/

$("#options1").change(function() {
    $("#filter1").keyup();
});
$("#filter1").keyup(function () {
    var filter1 = $("#filter1").val();
    var tr = $('tr').not(":nth-child(1)");
    if (!filter1.length) return tr.show();
    tr.hide().filter(function () {
        var t = $('.wys', this).attr('data-wys');
        return operators[$("#options1").val()](t, parseInt(filter1));
    }).show();
});

如果点击按钮,您会看到一些表格。 'td'设置attr以优化下一步的搜索。

第一个输入更改列值, 第二个输入更改列Value2, 第三个输入更改列Value3, 最后并不重要。

如何连接所有表单以获得一个共同的结果?现在,如果我键入任何形式的结果是来自所有'tr'

1 个答案:

答案 0 :(得分:1)

我正如您所说的那样优化了代码,演示JSFIDDLE

$(document).ready(function() {
    function eachcolom($that){
    $that.each(function() {
            $(this).attr('data-wys',parseFloat($(this).text()));
        });
    }
    $("#inputs").hide();
    $("#detailed").click(function(){
        $("#inputs").toggle();

        eachcolom($('.wys'))
        eachcolom($('.ctr'))
        eachcolom($('.ok'))



    });

    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 }
    };
    function allForm($that, filt, ass, ty){
    var filter1 = $(filt).val();


        var tr = $('tr').not(":nth-child(1)");
        if (!filter1.length) return tr.show();
        switch(ty){
            case 'f':

                filter1 = parseFloat(filter1);
                break;
             case 'i':

                filter1 = parseInt(filter1);
                //alert(filter1)
                break;

        };
        tr.hide().filter(function () {
            var t = $("."+ass.attr('class'), this).attr('data-'+ass.attr('class'));
            console.log(operators[$that.val()](t, filter1))

            return operators[$that.val()](t, filter1);
        }).show();

    }
    $("#options1").change(function() {
        //allForm($(this),$('#filter1'))
        $("#filter1").keyup();
    });
    $("#filter1").keyup(function () {
        //alert('')
        allForm($(this).prev('select'), this, $('.wys'), 'i')
    });

    $("#options2").change(function() {
        $("#filter2").keyup();
    });
    $("#filter2").keyup(function () {
        allForm($(this).prev('select'), this, $('.ctr'), 'f')

    });


    $("#options3").change(function() {
        $("#filter3").keyup();
    });
    $("#filter3").keyup(function () {
        allForm($(this).prev('select'), this, $('.ok'), 'f')
    });
});