我正在尝试勾选tbody的所有复选框,当它的thead的复选框被选中但它不起作用

时间:2017-08-22 08:17:01

标签: javascript html-table

我正在尝试勾选tbody的所有复选框,当它的thead的复选框被选中但它不起作用。静态值(thead.thead0)正在运行,但动态值(thead.thead" + z +")无效。

要检查的行 - is_admin()

$("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]")

当我静态尝试时,它可以工作:

            for (var z=0; z<dlength; z++) {
                var thead = "<thead class='thead"+z+"'><tr><th class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></th><th class='center'>"+disarray[z]+"</th></tr></thead>";
                $('#add-table').append(thead);
                alldata.forEach(function(e, i){
                    if(alldata[i]['section_name'] == disarray[z]){
                        var tbody = "<tbody class='tbody"+z+"'><tr><td class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></td><td>"+alldata[i]['emp_Fullname']+"</td></tr></tbody>"
                        $('#add-table').append(tbody);
                        console.log(alldata[i]['section_name']);
                    }
                });

                //And for the first simple table, which doesn't have TableTools or dataTables
                //select/deselect all rows according to table header checkbox
                var active_class = 'active';

                //this part is not working thead.thead"+z+".

                $("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]").eq(0).on('click', function(){
                    var th_checked = this.checked;//checkbox inside "TH" table header

                    $(this).closest('table').find("tbody.tbody"+z+" > tr").each(function(){
                        var row = this;
                        if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                        else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                    });
                });

                //select/deselect a row when the checkbox is checked/unchecked
                $('#add-table').on('click', 'td input[type=checkbox]' , function(){
                    var $row = $(this).closest('tr');
                    if(this.checked) $row.addClass(active_class);
                    else $row.removeClass(active_class);
                });  
            }

1 个答案:

答案 0 :(得分:0)

我认为这里table.tbodytd应该是th,而不是$("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]")

$("#add-table > thead.tbody"+z+" > tr > td input[type=checkbox]")

应该是

   summary2 = summary.join(county_prop, ["category_id", "bucket"], how = "leftouter").