Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Click Edit event achieved using Jquery form background color
Has a radio button, when you click the button, the background color of this line will change the entire contents of each column table before, when you click on the checkboxes time again, cancel the background color.
No style before clicking
click time style
Reading program: Use table table, the first cell of each row of the table has a radio button and
a few cells are content, they want to add style effects.
Look at the code (Attention must be imported js file）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.js"></script>
</head>
<style>
tr td{
border: 2px solid black;
width: 150px;
height: 30px;
}
.odd{
background-color: antiquewhite;
}
.even{
background-color: aquamarine;
}
.checked{
background-color: yellow;
}
</style>
<body>
<table>
<tr><td></td><td>姓名</td><td>薪水</td><td>年龄</td></tr>
<tr><td><input type="checkbox"></td><td>张三</td><td>22000</td><td>21</td></tr>
<tr><td><input type="checkbox"></td><td>李四</td><td>10000</td><td>25</td></tr>
<tr><td><input type="checkbox"></td><td>王五</td><td>15000</td><td>23</td></tr>
<tr><td><input type="checkbox"></td><td>赵六</td><td>12000</td><td>28</td></tr>
</table>
</body>
<script>
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$(":checkbox").on("click",function(){
$(this).parent().parent().toggleClass("checked");
});
});
</script>
</html>