Добавление / удаление класса в / из ячеек таблицы, которое вызывается событием дочернего элемента

Question

Я использую jQuery 1.4.Я пытаюсь выделять тег <td> таблицы каждый раз, когда выбирается радиокнопка внутри этого "<td>", и удаляю класс выделения, если он не выбран.

Вот разметка:

CSS: .highlight-blue {background-color: # 81BEF7;}

<table id="tblContainer">

        <tr>
            <td>
                <input type="radio" name="book" value="book1" /> Book 1</td>
            <td>
                <input type="radio" name="book" value="book2" /> Book 2</td>
            <td>
                <input type="radio" name="book" value="book3" /> Book 3</td>
                            <td>
                <input type="radio" name="book" value="book4" /> Book 4</td>
     </tr>
</table>

Javascript:

// highlight checked radion button
            $('#tblContainer :radio').click(function() {

            //add class to hilghlight selected radio button
            var cell = $(this).closest('td');
                if ($(this).is(':checked')) {
                    cell.addClass('highlight-blue');
                }
                else {
                //remove highlight class
                    cell.removeClass('highlight-blue');
                }

            });

Проблема в том, что он не удаляет класс из ранее выбранных переключателей.

Обновление 1: Смотрите новую обновленную наценку здесь http://jsbin.com/egusud/7

Answer 1

Да, вы захотите перейти на уровень строк (если переключатели просто связаны друг с другом в строке) или уровень таблицы (если они связаны друг с другом в строках).

Предполагается, что только в пределах строки ( пример в реальном времени ):

$('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove highlight
    $this.closest("tr").find("td.highlight-blue").removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue");
});

Обратите внимание, что вы можете нажать только на переключатель, если он выбран, поэтому проверять не нужно

---

Не по теме : людям будет проще нажимать эти переключатели, если вы добавите label s ( живая копия ):

<label><input type="radio" name="book" value="book1"> Book 1</label>

Если это так, вы можете добавить этот стиль CSS к меткам ( живая копия ):

label {
    cursor: pointer;
}

..., чтобы сделать их более очевиднымиможно щелкнуть.

---

Обновление : Из комментариев видно, что ваши радиокнопки находятся в разных строках друг от друга, и что у вас также есть смешанные другие радиокнопки,как это:

<table id="tblContainer">
  <thead>
    <tr>
      <th>Books</th>
      <th>Magazines</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book1"> Book 1</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine1"> Magazine 1</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book2"> Book 2</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine2"> Magazine 2</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="book" value="book3"> Book 3</label>
      </td>
      <td>
        <label><input type="radio" name="magazine" value="magazine3"> Magazine 3</label>
      </td>
    </tr>
  </tbody>
</table> 

В этом случае, чтобы удалить класс из старого, вам просто нужно найти другие переключатели с тем же самымmes, затем их родительские ячейки с этим классом ( живая копия ):

jQuery(function($) {

  $('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove highlight from cells containing
    // radio buttons with this same name
    $this
      .closest("table")
      .find('input:radio[name="' + this.name + '"]')
      .closest("td.highlight-blue")
      .removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue");
  });

});

Или, альтернативно, подход «класса маркера» (здесь я использовал «rb-» плюсимя переключателя, но вы должны убедиться, что имена переключателей действительны для имен классов) ( live copy ):

jQuery(function($) {

  $('#tblContainer :radio').click(function() {
    var $this = $(this);

    // Remove previous highlight if any
    $("td.highlight-blue.rb-" + this.name).removeClass("highlight-blue");

    // Add it to this one
    $this.closest("td").addClass("highlight-blue rb-" + this.name);
  });

});

Answer 2

$("#tbl_ClientSites > tbody > tr").live("click", function() {
        var trInstance = $('#tbl_ClientSites > tbody').find('tr');                   
                trInstance.removeClass('highlighted');
                trInstance.find('tr:eq(0)').removeClass('highlighted');
                var instance = $(this);
                instance.addClass('highlighted');
                instance.find('tr:eq(0)').addClass('highlighted');      
    });

Выделенная ранее выделенная строка удаляется. текущая строка, по которой щелкнули, подсвечивается.

Answer 3

$('#tblContainer :radio').click(function() {
//remove highlight from all
$('#tblContainer td').removeClass('highlight-blue')
            //add class to hilghlight selected radio button
            var cell = $(this).closest('td');


                    cell.toggleClass('highlight-blue');


            });

Answer 4

Если вы хотите удалить класс из ранее выбранных радиокнопок, вы должны перебрать все радиокнопки и удалить класс, кроме $ (this).Или вы можете использовать идентификатор вместо класса, а затем просто удалить идентификатор из ранее выбранного и добавить его в новый.