有两个示例先粘过来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业讲解</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 999; } .modal { position: fixed; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; margin-left: -200px; background-color: white; z-index: 1000; } .hide { display: none; } </style> </head> <body> <button id="add-btn">新增</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>晓梅</td> <td>烧热水</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>小雨</td> <td>烧热水</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>3</td> <td>建超</td> <td>烧热水</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>4</td> <td>Egon</td> <td>烧热水</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>5</td> <td>李岩</td> <td>喝热水</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="modal hide"> <p> <label for="modal-name">姓名</label> <input id="modal-name" type="text" name="name"> </p> <p> <label for="modal-hobby">爱好</label> <input id="modal-hobby" type="text" name="hobby"> </p> <p> <button id="modal-submit">提交</button> <button id="modal-cancel">取消</button> </p> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 弹出模态框函数 function showModal() { $(".cover, .modal").removeClass("hide"); } // 关闭模态框 function hideModal() { $(".cover, .modal").addClass("hide"); // 清空模态框里面的input $(".modal input").val(""); } // 绑定事件 $(document).ready(function () { // 添加按钮绑定事件 $("#add-btn").on("click", function () { showModal(); }); // 模态框里面的取消按钮，绑定关闭模态框事件 $("#modal-cancel").on("click", function () { hideModal(); }); // 表格中删除按钮绑定事件 $("tbody").on("click", ".delete", function () { // this 当前点击的删除按钮 // $(this) --> 变成jQuery对象 var $currentTr = $(this).parent().parent(); // 更新当前行后面的所有tr的序号（tr的第一个td儿子） $currentTr.nextAll().each(function () { var $firstTd = $(this).children().first(); // this --> 当前循环中的那个tr var currentNum = parseInt($firstTd.text()) - 1; $firstTd.text(currentNum); }); // 删除当前行 $currentTr.remove(); }); // 点击模态框里面的提交按钮，把数据添加到表格中 $("#modal-submit").on("click", function () { // 获取模态框里面input的值 var name = $("#modal-name").val(); var hobby = $("#modal-hobby").val(); // 如果是编辑操作，我应该去更新原来的td的值 var $tds = $("#modal-submit").data("tds"); if ($tds !== undefined) { // 能够取到$tds,表示我是一个编辑的操作 // 更新$tds $tds.eq(1).text(name); $tds.eq(2).text(hobby); } else { // 取不到tds,表示我是一个新增的操作 // 因为是新增操作，所以要创建新的tr // 创建tr标签 var trEle = document.createElement("tr"); // 获取当前表格里面所有的tr标签的个数，正好就是我新增tr的序号 var currentNum = $("table tr").length; $(trEle).append("<td>" + currentNum + "</td>"); $(trEle).append("<td>" + name + "</td>"); $(trEle).append("<td>" + hobby + "</td>"); $(trEle).append("<td>" + ‘<button class="edit">编辑</button> <button class="delete">删除</button>‘ + "</td>"); // 把生成的tr标签添加到tbody的最后 $(trEle).appendTo("tbody"); } // 清空一下$tds $("#modal-submit").removeData("tds"); // 隐藏模态框 hideModal(); }); // 编辑按钮 $("tbody").on("click", ".edit", function () { // 显示模态框 showModal(); // 取出当前行的数据，填写到模态框里面的input中 // 1.取当前行的数据 // this 当前点击的那个编辑按钮 // 找到当前行所有的td var $tds = $(this).parent().parent().children(); $("#modal-submit").data("tds", $tds); var name = $tds.eq(1).text(); var hobby = $tds.eq(2).text(); console.log(name, hobby); // 将取到的数据填写到模态框里面的input $("#modal-name").val(name); $("#modal-hobby").val(hobby); }) }) </script> </body> </html>
表格的增删改查,这是jQuery的核心内容,事件绑定和函数调用,以及标签查找都在这里灵魂运用到了,还有data的方法
data方法使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data()示例</title>
</head>
<body>
<div id="d1">div</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
我们上面的这段代码里面只有一句话就是body里面的那个div标签
我们的data就在这里演示:
$("#d1").data("晓风干","泪痕残") //这里是使用id值找到div标签然后使用data方法在里面添加键值对
[div#d1]0: div#d1length: 1__proto__: Object(0) //这里的length:1 说明我们添加的内容在里面
$("#d1").data("晓风干") //就像取出我们字典键值对的方式那样去把key对应的value值取出来
"泪痕残" //这里我们拿到了value的值
$("#d1").data("k1","v1")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("k1")
"v1" // 这个例子同上
$("#d1").data("世情薄","人情恶")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("世情薄")
"人情恶" //同上
$("#d1").data() //这样写就拿出了所有的我们之前存入的值了
{晓风干: "泪痕残", k1: "v1", 世情薄: "人情恶"} //这里是结果
$("#d1").data("age",30) //基于上面都是存入的字符串,所以我们这里存入数字,试一下
[div#d1]
$("#d1").data("age")
30 //一样得到结果
$("#d1").data("arg",true) //这里存入bool值,试一下
[div#d1]
$("#d1").data("arg")
true //一样得到结果
$("#d1").data("body").html() //还可以使用html方法
"
<div id="d1">div</div>
<script src="jquery-3.2.1.min.js"></script>
"
引号里面的内容是结果
$("#d1").data("a",[1,2,3,4,5])
[div#d1]
$("#d1").data("a")
(5) [1, 2, 3, 4, 5]0: 11: 22: 33: 44: 5length: 5__proto__: Array(0) //还可以在data里面存入数组
除了一味地添加,我们还可以进行删除使用removeData,要注意是驼峰体,
$("#d1").removeData("a")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("a")
undefined //删除成功执行之后我们再对其进行查询的时候,得到undefined的结果.