2

私は現在次の表を持っています：

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

各コースは複数回実行されますが、選択できるのは1回のみであるため、コースコードごとに複数のIDがあります。

私がやりたいのは、1つが選択されたら、重複する行を無効化/強調表示できるようにすることです。

上記の例では、最初の行が選択された場合、2番目の行が無効になり、その逆も同様です。3番目の行が選択された場合、何も起こりません。

jQueryを使用していくつかの関数を試しましたが、どこから始めてビルドするのかよくわかりません。

4

4 に答える 4

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 フィドルのデモ。

参考文献:

于 2012-04-17T22:31:22.093 に答える
1

古いバージョンの IE (8/7/6) で動作するはずのサンプル jQuery 関数を次に示します。

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

于 2012-04-17T22:16:18.053 に答える
1

If I understood correctly, then all you need to implement a click handler for the checkbox like below,

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; }
于 2012-04-17T22:06:47.673 に答える
0

テーブルを生成するときに、次のようなhtmlセルに属性を追加します

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

jqueryを使用する場合

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

それは簡単です

于 2012-04-17T21:39:12.640 に答える