如何根据我选择的单选按钮选择列中的所有单元格（td 和 th）？

Posted 2023-05-09

【中文标题】如何根据我选择的单选按钮选择列中的所有单元格（td 和 th）？

【英文标题】：How do I select all cells (td and th) in a column based on what radiobutton I select?

【发布时间】：2012-08-29 08:42:24

【问题描述】：

我在 html 中的示例：

<table id="testME">
   <tr>
      <td><input id="first" name="choices" type="radio" value="1"></td>
      <td><input id="second" name="choices" type="radio" value="2"></td>
      <td><input id="third" name="choices" type="radio" value="3"></td>
   </tr>
   <tr>
      <td><label for="first">My first selection</label></td>
      <td><label for="second">My second selection</label></td>
      <td><label for="third">My third selection</label></td>
   </tr>
   <tr>
      <td><input id="myWords" type="text" /></td>
      <td><select id="mySelects">
             <option value="30">Choice 1</option>
             <option value="31">Choice 2</option>
          </select>
      </td>
      <td><input id="multiOne" name="multiSelect" type="checkbox" value="one" />
          <label for="multiOne">One</label><br />
          <input id="multiTwo" name="multiSelect" type="checkbox" value="two" />
          <label for="multiTwo">Two</label><br />
          <input id="multiThree" name="multiSelect" type="checkbox" value="three" />
          <label for="multiThree">Three</label><br />
          <input id="multiFour" name="multiSelect" type="checkbox" value="four" />
          <label for="multiFour">Four</label><br />
      </td>
   </tr>
</table>

我希望发生的是，当我单击单选按钮或其标签时，该列中的所有单元格（无论是 th 还是 td）都会以某种颜色突出显示。我想用 JQuery 来做这件事。

在发布这个问题之前我在研究什么：

<script>
function highlightSelection() 
        $('#testME > tr > td:nth-child(2)').css('background-color', 'gray');
    
</script>
<input id="jquerytest" type="button" onclick="javascript:highlightSelection();" value="Change Color" />@:&nbsp; &nbsp; &nbsp;

但这似乎不起作用。

【问题讨论】：

你试过了吗？也许你可以展示你所做的事情，然后有人可以帮助你实现它？

@dotnetN00b 你有没有看过我的回答？ :-P

@Neal：是的，我是。但我是在回应两张海报。他们肯定有一个合理的观点，当我发布我的问题时，我应该发布我的尝试。

【参考方案1】：

类似这样的：

$("table").on("click", "input", function() 
    var td = $(this).parent("td"),
        tdIndex = td.index();
    var tr = td.parent("tr"),
        trIndex = tr.index();

    $("table, table tr, table tr td").css("background", "none");

    $("td:eq(" + tdIndex + ")", "tr").css("background", "red");
    $("tr:eq(" + trIndex + ")").css("background", "blue");

);​

小提琴：http://jsfiddle.net/maniator/rZqdP/

【讨论】：

奇怪的是，我不断收到Object doesn't support this method or property 错误。我正在使用 MVC 3 和 Razor。我自己在$(document).ready() 内部尝试过，但当它不起作用时jQuery(document).ready()

我将 on 方法更改为 $('table input').click(function () .... 并且效果很好。谢谢，@尼尔

当我使用on 时，我的第一条评论中不断出现错误。 click 方法使该错误消失。我目前正在使用 JQuery 1.5.1。

@dotnetN00b 这很有意义。 .on(...) 仅存在于 jQuery > 1.7 中。切换，你会很好:-)

啊，我明白了。我认为它始终是on 的包装。每天学些新东西。谢谢！