jquery添加数据隔行变色

来源：互联网发布：plmn 移动网络编辑：程序博客网时间：2024/06/05 10:54

<!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">
.tou {
background: red;
}
</style>
</head>

<body>

姓名:<input type="text" id="name" />年龄:<input type="text" id="age" />生日:<input type="text" id="birthday" />
<input type="button" id="add" value="添加" />
<br>
<table border="1px" id="t">
<tr class="tou">
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>删除</th>
</tr>

</table>


<script type="text/javascript">
//添加
$("#add").click(function() {

//获取数据名字年龄生日
var name = $("#name").val();
var age = $("#age").val();
var birthday = $("#birthday").val();
//添加到表格里面
var tr = "<tr><td>" + name + "</td><td>" + age + "</td><td>" + birthday + "</td><td><input type='button' value ='删除' onclick ='dele(this)'/></td></tr>";
$("#t").append(tr);
change();
});
//删除
function dele(t) {
/*
* 原生js实现删除
* var tr = t.parentNode.parentNode;
tr.remove();*/
/**
* 使用jQuery实现删除
*/
var tr = $(t).parent().parent();
tr.remove();
change();
//如果表格就剩下最后一行，就将整个表格消失
var ta = $("tr");
if (ta.length == 1) {
$("#t").empty();
}
}
//将奇数行变成灰色，偶数行白色

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();
</script>
</body>

</html>

阅读全文

0 0