单击按钮时在表格中的单元格底纹

Question

I have a function that shades every other row in a cell, but can't figure out how to get it so when the button is clicked again, the cells get un-shaded. 我有一个函数可对单元格中的每隔一行进行着色，但是无法弄清楚如何获得它，因此当再次单击按钮时，单元格将不着色。 I'd also like it to not select the first row with the row headers. 我还希望它不要选择带有行标题的第一行。 Any ideas would be appreciated! 任何想法，将不胜感激！

 $(document).ready(function() { $('#nbrTxt').focus(); function addItem() { var value = $('#nbrTxt').val(); var usrName = prompt("Name?"); for (var i = 1; i <= value; i++) { $('table').append('<tr><td></td><td></td></tr>'); $('table tr:last td:first').html(i); $('table tr:last td:last').html(usrName); $(this).focus().select(); }; }; $('#btnGo').click(addItem); $('#nbrTxt').keydown(function(e) { if (e.which === 13) addItem(); }) $(document).on('click', '#shade', function() { $('tr:even').css('background', '#A0A0A0'); }) $(document).on('click', '#drkLine', function() { if ($('#nbrTxt').val() % 10 === 0) { ($('#nbrTxt').val()).css('textDecoration', 'line-through'); } }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <!doctype html> <html> <head> <title>JQuery Selector</title> <style type="text/css"> body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; } </style> <script src="jquery-1.11.3.min.js"></script> <script src="jqueryselector.js"></script> </head> <body> <h1>JQuery Selector</h1> Enter Number: <input type="number" name="nbrTxt" id="nbrTxt" /> <input type="button" value="GO" id="btnGo" /> <div id='buttons'> <input type="button" value="Shade Even Rows" id="shade" /> <input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" /> </div> <table id="table" width="500" border="1"> <tr> <td>No. Count</td> <td>Name</td> </tr> </table> </body> </html>

Answer 1

Add class shade in your style and use toggleClass() function to add/remove it, check example bellow. 在您的样式中添加类shade ，并使用toggleClass()函数add/remove它，请参见下面的示例。

If you don't want to select the first row you can use :not(:first-child) : 如果您不想选择第一行，则可以使用:not(:first-child) ：

$('tr:not(:first-child):even')

Hope this helps. 希望这可以帮助。

Snippet 片段

 $(document).ready(function() { $('#nbrTxt').focus(); function addItem() { var value = $('#nbrTxt').val(); var usrName = prompt("Name?"); $('table>tbody').empty(); for (var i = 1; i <= value; i++) { $('table').append('<tr><td></td><td></td></tr>'); $('table tr:last td:first').html(i); $('table tr:last td:last').html(usrName); $(this).focus().select(); }; }; $('#btnGo').click(addItem); $('#nbrTxt').keydown(function(e) { if (e.which === 13) addItem(); }) $(document).on('click', '#shade', function() { $('tr:not(:first-child):even').toggleClass('shade'); }) $(document).on('click', '#drkLine', function() { if ($('#nbrTxt').val() % 10 === 0) { ($('#nbrTxt').val()).css('textDecoration', 'line-through'); } }) });

 tr.shade{ background: #A0A0A0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>JQuery Selector</h1> Enter Number: <input type="number" name="nbrTxt" id="nbrTxt" /> <input type="button" value="GO" id="btnGo" /> <div id='buttons'> <input type="button" value="Shade Even Rows" id="shade" /> <input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" /> </div> <table id="table" width="500" border="1"> <thead> <tr> <td>No. Count</td> <td>Name</td> </tr> </thead> </table>

单击按钮时在表格中的单元格底纹

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-11 15:08:59

Snippet 片段

单击按钮时在表格中的单元格底纹

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-11 15:08:59

Snippet 片段

解决方案1
1 已采纳 2016-01-11 15:08:59