Javascript 如何在选择行时更改行颜色？ 我是C++程序员，转而从事Web开发。我正在学习一些教程，并尝试为表行着色。我发现大多数例子都与专栏有关。下面的代码尝试在选中复选框时为行着色，但有些想法不正确 <table border=1> <tr id="id1"> <td>row11</td> <td>row12</td> <td>row13</td> <td>row14</td> </tr> <tr id="id2"> <td>row21</td> <td>row22</td> <td>row23</td> <td>row24</td> </tr> <tr id="id3"> <td>row31</td> <td>row32</td> <td>row33</td> <td>row34</td> </tr> </table>

请帮助我如何将其用于为行着色

function toggleVis(){
    $(this).toggleClass("red-cell");
}

td.red-cell {
    background: #F00; /* Or some other color */
}

---

关于

如果使用jQuery，则不需要使用onclick之类的内联函数，最好使用jQuery“on”函数

$(function () {
  $('.controls').on('click', function () {    
     // for row (tr)
     // $('#table').find('tr').eq(+$(this).val() - 1).toggleClass("red-cell");

     // for cell (td)
     // $('#table').find('tr td').eq(+$(this).val() - 1).toggleClass("red-cell");
  });
});

<table border=1 id="table">
    <tr>
       <td>row11</td>
       <td>row12</td>
       <td>row13</td>
       <td>row14</td>
     </tr>
     <tr>
       <td>row21</td>
       <td>row22</td>
       <td>row23</td>
       <td>row24</td>
     </tr>
     <tr>
       <td>row31</td>
       <td>row32</td>
       <td>row33</td>
       <td>row34</td>
     </tr>
   </table>

  <form name="rcol" onsubmit="return false">
    <p>columns</p>

    <input type=checkbox name="row" value="1" class='controls'> 1
    <input type=checkbox name="row" value="2" class='controls'> 2
    <input type=checkbox name="row" value="3" class='controls'> 3
  </form>

$（函数（）{
$（'.controls'）。在（'click'，函数（）{
//世界其他地区（tr）
//$（'#table'）.find（'tr'）.eq（+$（this.val（）-1）.toggleClass（“红细胞”）；
//电池（td）
//$（'#table'）.find（'tr td'）.eq（+$（this.val（）-1）.toggleClass（“红细胞”）；
});
});
第11行
第12行
第13行
第14行
第21行
第22行
第23行
第24行
第31行
第32行
第33行
第34行
纵队

1.
2.
3.

$(function () {
  $('.controls').on('click', function () {    
     // for row (tr)
     // $('#table').find('tr').eq(+$(this).val() - 1).toggleClass("red-cell");

     // for cell (td)
     // $('#table').find('tr td').eq(+$(this).val() - 1).toggleClass("red-cell");
  });
});

<table border=1 id="table">
    <tr>
       <td>row11</td>
       <td>row12</td>
       <td>row13</td>
       <td>row14</td>
     </tr>
     <tr>
       <td>row21</td>
       <td>row22</td>
       <td>row23</td>
       <td>row24</td>
     </tr>
     <tr>
       <td>row31</td>
       <td>row32</td>
       <td>row33</td>
       <td>row34</td>
     </tr>
   </table>

  <form name="rcol" onsubmit="return false">
    <p>columns</p>

    <input type=checkbox name="row" value="1" class='controls'> 1
    <input type=checkbox name="row" value="2" class='controls'> 2
    <input type=checkbox name="row" value="3" class='controls'> 3
  </form>