如果单元格重复，突出显示表格行

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            |  ....

每门课程运行不止一次，但只能选择一次，因此每个课程代码有多个 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()。

Answer 2

如果我理解正确，那么您只需要为下面的复选框实现一个点击处理程序，

DEMO

$('#courses > tbody > tr > td > .selectCourse').on('click', function () {
    var $tr = $(this).closest('tr')
    var selCourseCode = $tr.find('td:eq(1)').html();
    var isChecked = this.checked;
    if (isChecked) {
        $tr.addClass('highlight');
    } else {
        $tr.removeClass('highlight');
    }

    $.each ($tr.siblings(), function () {
        var courseCode = $(this).find('td:eq(1)').html();
        if (courseCode == selCourseCode) {
            if (isChecked) {
                $(this).find('.selectCourse').prop('disabled', true);
                $(this).addClass('disable');
            } else {
                $(this).find('.selectCourse').removeProp('disabled');
                $(this).removeClass('disable');
            }
        }
    });
});

CSS：

.highlight { background-color: #386C98; }
.disable { background-color: #386C98; color: grey; }

Answer 3

这是一个示例 jQuery 函数，它应该在旧版本的 IE (8/7/6) 中工作：

http://jsfiddle.net/lazerblade01/d2QtL/9/

Answer 4

当你生成表格时，给 html 单元格添加一个属性

 <td data-course-name="math">math</td>

使用jquery时试试

 $('td[data-course-name=' + name of the course + ']').css( apply css here)

很简单