时间戳

首页 > 解决方案 > 使用单选按钮突出显示表格列

javascript - 使用单选按钮突出显示表格列

问题描述

我有一张桌子，我想只用单选按钮来控制它的突出显示。但是当我将选择器更改为仅输入时：收音机不起作用。仅适用于我的示例中的选择器。

$("th").on("click", function () {
  var $currentTable = $(this).closest("table");
  var index = $(this).index();
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});
table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

标签： javascripthtmlcss

解决方案

切换到单选按钮时，您必须收听change事件以确定何时真正检查按钮。关键字也this将依赖于按钮，而不是th，因此您必须找到th才能获得正确的索引。

请参见下面的示例：

$("input[name='test']").on("change", function () {
  var $currentTable = $(this).closest("table");
  var index = $(this).closest('th').index();
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});
table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

推荐阅读