$(document).ready(function() { $('#gdRows').find('input:checkbox[id$="chkDelete"]').click(function() { var isChecked = $(this).prop("checked"); var $selectedRow = $(this).parent("td").parent("tr"); var selectedIndex = $selectedRow[0].rowIndex; var sColor = ''; if (selectedIndex % 2 == 0) sColor = 'PaleGoldenrod'; else sColor = 'LightGoldenrodYellow'; if (isChecked) { $selectedRow.css({ "background-color": "DarkSlateBlue", "color": "GhostWhite" }); } else { $selectedRow.css({ "background-color": sColor, "color": "black" }); } }); });
<table id="gdRows" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;font-family:Arial;font-size:Small;width:80%;border-collapse:collapse;"> <tr align="left" style="background-color:Tan;font-weight:bold;"> <th scope="col"> </th><th scope="col">ID</th><th scope="col">Product Name</th><th scope="col">Quantity</th><th scope="col">Price</th> </tr><tr align="left"> <td> <input id="gdRows_ctl02_chkDelete" type="checkbox" name="gdRows$ctl02$chkDelete" /> </td><td>1</td><td>Mouse</td><td>10</td><td>100</td> </tr><tr align="left" style="background-color:PaleGoldenrod;"> <td> <input id="gdRows_ctl03_chkDelete" type="checkbox" name="gdRows$ctl03$chkDelete" /> </td><td>2</td><td>Speaker</td><td>15</td><td>990</td> </tr><tr align="left"> <td> <input id="gdRows_ctl04_chkDelete" type="checkbox" name="gdRows$ctl04$chkDelete" /> </td><td>3</td><td>Hard Drive</td><td>35</td><td>3990</td> </tr><tr align="left" style="background-color:PaleGoldenrod;"> <td> <input id="gdRows_ctl05_chkDelete" type="checkbox" name="gdRows$ctl05$chkDelete" /> </td><td>4</td><td>RAM</td><td>22</td><td>399</td> </tr><tr align="left"> <td> <input id="gdRows_ctl06_chkDelete" type="checkbox" name="gdRows$ctl06$chkDelete" /> </td><td>5</td><td>Wireless Keyboard</td><td>10</td><td>3500</td> </tr><tr align="left" style="background-color:PaleGoldenrod;"> <td> <input id="gdRows_ctl07_chkDelete" type="checkbox" name="gdRows$ctl07$chkDelete" /> </td><td>6</td><td>Wi-Fi Router</td><td>1</td><td>3990</td> </tr><tr align="left"> <td> <input id="gdRows_ctl08_chkDelete" type="checkbox" name="gdRows$ctl08$chkDelete" /> </td><td>7</td><td>LCD</td><td>62</td><td>3000</td> </tr><tr align="left" style="background-color:PaleGoldenrod;"> <td> <input id="gdRows_ctl09_chkDelete" type="checkbox" name="gdRows$ctl09$chkDelete" /> </td><td>8</td><td>Intel Processor</td><td>5</td><td>7000</td> </tr><tr align="left"> <td> <input id="gdRows_ctl10_chkDelete" type="checkbox" name="gdRows$ctl10$chkDelete" /> </td><td>9</td><td>Monitor</td><td>25</td><td>1990</td> </tr><tr align="left" style="background-color:PaleGoldenrod;"> <td> <input id="gdRows_ctl11_chkDelete" type="checkbox" name="gdRows$ctl11$chkDelete" /> </td><td>10</td><td>Keyboard</td><td>20</td><td>350</td> </tr> </table>
body { padding:10px; } td { padding:6px; } th { padding:10px; font-weight:bold; }