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

每门课程都不止一次,但只有这样,才可以选择每门课程的多重身份。

我想要做的是,一旦选定了重复浏览器,就可以失控/突出重复浏览。

在上述例子中,如果选择了第一行,第二行就会失控,反之亦然。如果选择第三行的话,不会发生。

我曾尝试过几次使用 j子的功能,但并不真正确定从哪里开始建设。

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.

参考资料:

Answer 2

如果我正确理解,那么你们都需要在下面这样的检查箱中安装一个点击手器。

rel=“nofollow>>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

这里的“j Query”功能样本应使用旧版本的IEE(8/7/6):

。

Answer 4

当你生成桌子时,就向html电池加一 at。

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

使用jquery审判

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

简单

友情链接