废话少说先上JS代码:
JS的版本库是"jquery-1.11.0.min.js"
//全选js
$(function () {
var b = 0;
$("#btn_check").click(function () {
if (b == 0) {
b = 1;
$("#btn_check").val("全不选")
$("input[type=checkbox]").prop("checked", true);
}
else {
b = 0;
$("#btn_check").val("全选")
$("input[type=checkbox]").prop("checked", false);
}
});
});
//表格JS
var mycars = [
{ id: 1, name: "jack", age: 12 },
{ id: 2, name: "jerry", age: 23 },
{ id: 3, name: "mack", age: 34 }
];
$(function () {
$("#btn_table").click(function () {
for (var i = 0; i < mycars.length; i++) {
var emp = mycars[i];
var $tr = $("<tr></tr>");
$tr
.append("<td>" + emp.id + "</td>")
.append("<td>" + emp.name + "</td>")
.append("<td>" + emp.age + "</td>")
.appendTo("table#tb tbody")
.hover(function () {
yanse = $(this).css("backgroundColor");
$(this).css("backgroundColor", "blue");
},
function () {
$(this).css("backgroundColor", yanse);
});
$("table#tb tbody tr:even").css("background", "red");
$("table#tb tbody tr:odd").css("background", "yellow");
}
});
});
HTML代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<input type="checkbox" name="ck" value="音乐" />音乐
<input type="checkbox" name="ck" value="篮球" />篮球
<input type="checkbox" name="ck" value="游戏" />游戏
<input type="checkbox" name="ck" value="女人" />女人
<input type="button" name="" value="全选" id="btn_check"/>
<input type="button" name="name" value="表格" id="btn_table"/>
<table id="tb">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>