向由子元素事件触发的表单元格添加类/从中删除类

Adding/removing class to/from table cells that is triggered by child element event

本文关键字：添加 单元格 删除 表单 元素 事件      更新时间：2023-09-26

我使用的是jQuery 1.4。每次选择"<td>"中的单选按钮时，我都会尝试高亮显示该表的<td>标签，如果未选择，则删除高亮显示类。

这是标记：

CSS：.高亮蓝色｛背景色：#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

是的，您需要转到行级别(如果单选按钮在行中只是相互关联(或表级别(如果它们在行之间相互关联(。

假设仅在行内(实际示例(：

$('#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>

在这种情况下，要从旧的类中删除该类，您只需要找到其他具有相同名称的单选按钮，然后找到具有该类的父单元格(实时副本(：

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-"加上单选按钮的名称，但您需要确保单选按钮名称对类名有效((实时副本(：

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);
  });
});

$("#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');      
    });

先前高亮显示的选定行将被删除。当前单击的行将高亮显示。

$('#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');

            });

如果您想从以前选择的单选按钮中删除该类，则必须遍历所有单选按钮并删除该类($(this(除外(。或者，您可以使用ID而不是类，然后只需从以前选择的ID中删除ID，并将其添加到新的ID中。

相关文章：