js删除全选反选隔行变色

最新推荐文章于 2018-01-06 10:26:34 发布

原创最新推荐文章于 2018-01-06 10:26:34 发布 · 351 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和jQuery实现的表格示例，包括表格样式的设置、表格数据的增删改查功能及表单验证等。通过示例展示了如何使用jQuery简化DOM操作，实现动态表格管理和表单验证。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table {
border: #249bdb 1px solid;
width: 500px;
border-collapse: collapse;
}

table td {
border: #249bdb 1px solid;
padding: 5px;
}

table th {
border: #249bdb 1px solid;
padding: 5px;
background-color: rgb(200, 200, 200);
}

.one {
background-color: #9bf7d5;
}

.two {
background-color: #f3e99a;
}

.over {
background-color: #ef7125;
}
</style>
<script type="text/javascript">
function change() {

//普通方法
//获取所有的行
var trs = $("tr"); //元素选择器，可以选择一类标签，结果是个数组
//遍历，元素
for (var i = 0; i < trs.length; i++) {
//判断，如果是奇数行，变灰色
//如果是偶数行，不变色
if (i % 2 == 0) {

} else {
//改变样式 jQuery
var tr = trs[i];
tr.style.background = "#666"; //通过原生的js，改变背景色
}

}

}
change();

//复选框的全选动作。
function checkAll(node) {

//获取所有的mail复选框。
var collMailNodes = document.getElementsByName("mail");

for (var x = 0; x < collMailNodes.length; x++) {

collMailNodes[x].checked = node.checked;
}

}

//定义操作复选框按钮的方法。
function checkAllByBut(num) {

var collMailNodes = document.getElementsByName("mail");

for (var x = 0; x < collMailNodes.length; x++) {

if (num > 1)
collMailNodes[x].checked = !collMailNodes[x].checked;
else
collMailNodes[x].checked = num;
}

}

//删除所选
function deleteMail() {

if (!confirm("是否确定删除")) {
return;
}

//获取所有的mail节点
var collMailNodes = document.getElementsByName("mail");

for (var x = 0; x < collMailNodes.length; x++) {

if (collMailNodes[x].checked) {

var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}

trColor();
}
</script>
</head>

<body>
<form action="#" id="f">
姓名:<input type="text" id="username" /><span id="nametip">

</span>性别:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女生日:
<input type="text" id="birthday" /><span id="birtip">

</span>住址：
<select id="sheng">
<option>北京</option>
</select>
<select id="shi">
<option>西二旗</option>
</select>
<input type="submit" value="添加" />
</form>
<br />

<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
<tr>
<th colspan="3">
<input type="button" value="全选" onclick="checkAllByBut(1)" />
<input type="button" value="反选" onclick="checkAllByBut(2)" />
<input type="button" value="批量删除" onclick="deleteMail()" />
</th>
</tr>
<tr>
<td><input type="checkbox" name="all" onclick="checkAll(this)" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>地址</td>
<td>删除</td>
</tr>
</table>

<script type="text/javascript">
//页面加载的时候，就要将省的信息，和市的信息添加到页面
var arr = new Array();
arr["山东"] = new Array("青岛", "济南", "聊城");
arr["山西"] = new Array("运城", "太原", "临汾");
//先将省放入第一个下拉菜单
for (sheng in arr) {
$("#sheng").append("<option>" + sheng + "</option>");
}
//-----------------------------------市----
//当省的下拉改变的时候，市做相应的显示
$("#sheng").change(function() {
//每次清空一下，防止重复
$("#shi").empty();
$("#shi").append("<option>--市--</option>");
//根据省取出市，放入第二个下拉菜单
var s1 = $("#sheng").val();
var shis = arr[s1]; //shis是个数组
for (shi in shis) {
var s2 = shis[shi];
$("#shi").append("<option>" + s2 + "</option>");
}
});
//表单验证
$("#f").submit(function() {
//获取名生日，验证是否为空
var birthday = $("#birthday").val();
if (birthday == "") {
//提示
$("#birtip").html("生日不能为空");
//变色
$("#birtip").css({
"color": "red"
});
return; //结束方法
} else {
$("#birtip").html("");
}
var username = $("#username").val();
if (username.length > 3 && username.length < 30) {
//提示

} else {

return;
}
// 获取性别
var sex = $("input[type=radio]:checked").val();
// var sex = $("input:radio:checked").val();
// console.log(sex);
//取出地址
var address = $("#sheng").val() + "-" + $("#shi").val();
//添加到表格
var tr = "<tr><td><input type='checkbox' name='mail' /></td><td>" + username + "</td><td>" + sex + "</td><td>" + birthday + "</td><td>" + address + "</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>";
$("#t").append(tr);
//不想跳转，返回false
change();
return false;
});
//删除的方法
function dele(t) {
if (!confirm("是否确定删除")) {
return;
} else {
t.parentNode.parentNode.remove();
alert("删除成功");
}

}
</script>
</body>

</html>