jquery - 如果单元格重复则突出显示表格行

Question

我目前有下表:

Checkbox (ID)  |  Training Course Code  |  Training Course Name  |  ....
   [ ]         |  DE00155115-1          |  H&S Exec 1            |  ....
   [ ]         |  DE00155115-1          |  H&S Exec 1            |  ....
   [ ]         |  DE00074454-2          |  H&S Exec 2            |  ....

每门类(class)运行多次，但只能选择一次，因此每个类(class)代码有多个 ID。

我想要做的是能够在选择重复行后禁用/突出显示重复行。

在上面的示例中，如果选择了第一行，则第二行将禁用，反之亦然。如果选择第三行，则不会发生任何事情。

我尝试了使用 jQuery 的多个功能，但不太确定从哪里开始和构建。

Answer 1

这是一个很长且稍微复杂的选项:

$('table')
    .on('click','input:checkbox',
        function(){
            var that = $(this),
                thatRow = that.closest('tr'),
                id = that.parent().next('td').text();

            if (that.is(':checked')){
                that
                    .closest('tbody')
                    .find('tr td:nth-child(2)')
                    .each(
                        function(){
                            if ($(this).text() == id){
                                $(this)
                                    .closest('tr')
                                    .not(thatRow)
                                    .addClass('disabled')
                                    .find('input:checkbox')
                                    .prop('disabled',true);
                            }
                        });
            }
            else {
                that
                    .closest('tbody')
                    .find('tr td:nth-child(2)')
                    .each(
                        function(){
                            if ($(this).text() == id){
                                $(this)
                                    .closest('tr')
                                    .not(thatRow)
                                    .removeClass('disabled')
                                    .find('input:checkbox')
                                    .prop('disabled',false);
                            }
                        });
            }
        });​

JS Fiddle demo .

引用文献:

• addClass() .
• :checkbox selector .
• :checked selector .
• closest() .
• each() .
• find() .
• is() .
• next() .
• not() .
• :nth-child() selector .
• on() .
• parent() .
• prop() .
• removeClass() .
• text() .