0

私が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;

しかし、それはうまくいかないようです。

4

1 に答える 1

2

このようなもの：

$("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/

于 2012-09-04T16:33:47.227 に答える