jQuery实现隔行变色

简介：这里我主要用到了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 += `${v.name}${v.age}`})$("#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>

路过的铁子们给我点个赞

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！