正如你最近在我的问题的历史中看到的那样,我正在尝试理解
Jquery /
Javascript :)我遇到了以下问题,并想向你们提出这个问题.
我有下表(注意:这是由inspect元素抓取的HTML,我不知道为什么style =“background-color:rgb(255,255,255);是吗…):
<table class="table table-striped table-condensed" id="instance-table"> <thead> <tr id="checkrow"> <th><input type="checkbox" id="checkall"></th> <th>Column A</th> <th>Column A</th> <th>Column A</th> </tr> </thead> <tbody id="instanceInnerContent"> <tr style="background-color: rgb(255,255);"> <td class="act"><input type="checkbox"></td> <td>Value 1</td> <td>Value 2</td> </tr> <tr style="background-color: rgb(255,255);"> <td class="act"><input type="checkbox"></td> <td>Value 1</td> <td>Value 2</td> </tr> </tbody> </table>
并使用以下代码选择行或选择所有行或选择行单击:
// if user clicks on checkbox with id="checkall" - all checkboxes are selected // and table row background is highlighted $('body').on('click','#checkall',function () { $('input:checkbox:not(#checkall)').prop('checked',this.checked); if ($(this).is(':checked') == true) { $("#instance-table").find('tr:not(#checkrow)').css("background-color","#ccc"); //$('#instance-action').removeAttr('disabled'); } else { $("#instance-table").find('tr:not(#checkrow)').css("background-color","#fff"); //$('#instance-action').attr('disabled','disabled'); } }); // if user clicks on checkbox,diffrent than checkbox with id="checkall",// then checkbox is checked/unchecked $('body').on('click','input:checkbox:not(#checkall)',function () { if($("#checkall").is(':checked') == true && this.checked == false) { $("#checkall").prop('checked',false); $(this).closest('tr').css("background-color","#ffffff"); } if(this.checked == true) { $(this).closest('tr').css("background-color","#ccc"); //$('#instance-action').removeAttr('disabled'); // function to check/uncheck checkbox with id="checkbox" CheckSelectAll(); } if(this.checked == false) { $(this).closest('tr').css("background-color","#ffffff"); //$('#instance-action').attr('disabled','disabled'); } }); // if user clicks,someware on table row,checkbox is checked/unchecked // and table row background is highlighted or not $('body').on('click','#instance-table tbody tr',function () { var this_row = $(this); var checkbox = this_row.find('input:checkbox'); if (event.target.type !== 'checkbox') { if ( checkbox.is(':checked') == false ) { checkbox.prop('checked',true); this_row.css("background-color","#ccc"); //$('#instance-action').removeAttr('disabled'); CheckSelectAll(); } else { checkbox.prop('checked',false); this_row.css("background-color","#fff"); //$('#instance-action').attr('disabled','disabled'); CheckSelectAll(); } } }); function CheckSelectAll() { var flag = true; $('input:checkbox:not(#checkall)').each(function() { if(this.checked == false) flag = false; //console.log(flag); }); $("#checkall").attr('checked',flag); }
但不知怎的,条纹表行没有突出显示,怎么样?
虽然代码已经在这里,但我还有一个问题,即如果我手动检查每一行,它不会检查checkall复选框.当我手动检查checkall复选框时,取消选中每个复选框,然后再次手动检查每一行.我找不到错误.
解决方法
似乎bootstrap设置每个td背景颜色.因此,即使添加!important,将tr设置为背景颜色也不起作用.我通过为每个具有所需背景颜色的td添加一个类来解决它
CSS:
.selected { background-color: #ddd !important; }
码:
注意:代码是函数的一部分,它检查是否单击了行的第一个td内的复选框.
$(this).parent().parent().children('td').each(function() { $(this).addClass("selected"); });
它可能不是一个简洁的解决方案,但它的工作:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。