Question

我在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>

我想要发生的是当我点击radiobutton或其标签时，该列中的所有单元格（无论是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;

但这似乎不起作用。

Answer 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/

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

1 个答案: