简介:这里我主要用到了jQuery的两个方法odd(偶数),even(奇数)
一,html页面
<form>
<div>
<label>姓名</label>
<input type="text" id="name">
</div>
<div>
<label>年龄</label>
<input type="text" id="age">
</div>
<div>
<input type="button" value="添加" id="add">
</div>
</form>
<div>
<button id="open">开启隔行变色</button>
<button id="even">开启奇数隔行变色</button>
<button id="close">关闭隔行变色</button>
</div>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<thead>
<th>姓名</th>
<th>年龄</th>
</thead>
</tr>
<tbody id="tbody">
</tbody>
</table>
二,js代码
<script>
var arr = [{ "name": "qian", "age": 19 }, { "name": "li", "age": 19 }];
var flag = "关";/* 偶数的变量 */
var flag2 = "关";/* 奇数的变量 */
/* 添加数据列表点击事件 */
$("#add").click(function () {
var name = $("#name").val();
var age = $("#age").val();
arr.push({ name, age });
showTab(arr);
})
/* 默认加载渲染 */
$(function () {
showTab(arr);
})
/* 渲染方法 */
function showTab(arr) {
var str = "";
$.each(arr, function (i, v) {
str += `
<tr>
<td>${v.name}</td>
<td>${v.age}</td>
</tr>
`
})
$("#tbody").html(str);
/* 页面渲染对每个点击事件的变量赋值 */
if (flag == "关") {
$("#tbody>tr:odd").css({ "background": "white" });
flag = "关";
} else {
$("#tbody>tr:odd").css({ "background": "red" });
flag = "开";
}
if (flag2 == "关") {
$("#tbody>tr:even").css({ "background": "white" });
flag2 = "关";
} else {
$("#tbody>tr:even").css({ "background": "red" });
flag2 = "开";
}
}
/* 实现偶数行的点击事件 */
$("#open").click(function () {
$("#tbody>tr:odd").css({ "background": "red" });
$("#tbody>tr:even").css({ "background": "white" });
flag = "开";
flag2 = "关";
})
/* 实现奇数行的点击事件 */
$("#even").click(function () {
$("#tbody>tr:even").css({ "background": "red" });
$("#tbody>tr:odd").css({ "background": "white" });
flag = "关";
flag2 = "开";
})
/* 关闭隔行变色的点击事件 */
$("#close").click(function () {
$("#tbody>tr").css({ "background": "white" });
flag = "关";
flag2 = "关";
})
</script>
路过的铁子们给我点个赞