Question

我是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 */
}

请帮助我如何将它用于着色行。

此致

Answer 1

如果你使用jQuery，你不需要像onclick一样使用内联函数，更好地使用jQuery＆＃34; on＆＃34;功能。

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

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

1 个答案: