Выделите строку таблицы, если ячейка дублировать

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

Каждый курс работает более чем один раз, но может быть выбран только один раз, следовательно, на несколько идентификаторов на курс кода.

Что я хочу сделать, так это возможность отключить/выделить повторяющиеся строки после того, как они были выбраны.

В приведенном выше примере, если выбрана первая строка, вторая будет отключена и наоборот. Если выбрана третья строка, ничего не произойдет.

Я попытался выполнить несколько функций, используя 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

при создании таблицы, добавьте atribute в HTML клетки как

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

при использовании JQuery попробовать

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

Это просто

Answer 3

Если я правильно понял, то все, что вам нужно для реализации обработчика кликов для флажка, как показано ниже,

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 4

Вот пример функции JQuery, который должен работать в старых версиях IE (8/7/6):

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