如何在选择行时更改行颜色

How to change row color on selecting rows?

本文关键字：颜色 选择      更新时间：2023-09-26

我是一名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>

用于选择要着色的行的代码。

<form name="rcol" onsubmit="return false">
color columns
<input type=checkbox name="row1" onclick="toggleVis(this.name)" checked> 1
<input type=checkbox name="row2" onclick="toggleVis(this.name)" checked> 2
<input type=checkbox name="row3" onclick="toggleVis(this.name)" checked> 3
</form>

为行着色的Javascript/JQuery功能。

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>

http://jsbin.com/mowoz/1/

http://jsbin.com/mowoz/2/

相关文章：