Rumah > hujung hadapan web > tutorial js > jquery通过select列表选择框对表格数据进行过滤示例_jquery

jquery通过select列表选择框对表格数据进行过滤示例_jquery

WBOY
Lepaskan: 2016-05-16 16:49:41
asal
1300 orang telah melayarinya

jquery通过select列表选择框对表格数据进行过滤

表格数据

复制代码 代码如下:


   
       
           
           
       
   
   
       
           
           
       
       
           
           
       
       
           
           
       
   
Name Surname
Michael Jordan
Michael Jackson
Bruno Mars

 JS过滤代码,其中select是动态生成的
 

复制代码 代码如下:

 $("#example > thead th").each(function(i) {
    $("").attr("data-index", i).html($("")).change(function() {
        $("#example > tbody > tr").show().filter(function() {
            var comb = [], children = $(this).children();
            children.each(function(i) {
                var value = $("select[data-index='" + i + "']").val();
                if (value == $(this).text() || value == "") comb.push(1);
            });
            return comb.length != children.length;
        }).hide();
    }).appendTo("body");
});
$("#example > tbody tr").each(function() {
    $(this).children().each(function(i) {
        var that = $(this);
        var select = $("select[data-index='" + i + "']");
        if (!select.children().filter(function() {
            return $(this).text() == that.text();
        }).length) {
            select.append($("").text($(this).text()));
        }
    });
});
 
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan