练习效果：(仅用于技术点练习)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script> //删除 function del(o) { $(o).parent().parent().remove(); } //修改 function update(o) { if ($(o).text() == "修改") { $(o).text("保存"); var c = $(o).parent().prevAll(); var chang = $(o).parent().prevAll().length; for (var i = 0; i < chang; i++) { var text = c[i].textContent; c[i].innerHTML = "<input type='text' value='" + text + "'/>"; } } else if ($(o).text() == "保存") { $(o).text("修改"); var c = $(o).parent().prevAll(); var chang = $(o).parent().prevAll().length; for (var i = 0; i < chang; i++) { c[i].innerHTML = $(c[i]).children().val(); } } } //添加 function add() { //复制元素clone var c = $("tr:eq(1)").clone(); //添加到table的最后 c.appendTo($("table")); } //查询 function find() { //需要查询的内容 var cha = $("#cha").val(); if (cha != "") { var result = ""; var list = $("tr:gt(0)"); for (var i = 0; i < list.length; i++) { if ($(list[i]).children()[0].textContent == cha) { result = $(list[i]).clone(); } } if (result != "") { $("tr:gt(0)").hide(); result.appendTo($("table")); } } else { window.location.reload(); } } </script> </head> <body> <a href="#" onclick="add()">添加</a> <input type="text" id="cha" /><a href="#" onclick="find()">查询</a> <table border="1"> <tr> <td>编号</td> <td>姓名</td> <td>薪水</td> <td>功能</td> </tr> <tr> <td>1</td> <td>李宁</td> <td>10000</td> <td> <a href="#" onclick="update(this)">修改</a> <a href="#" onclick="del(this)">删除</a> </td> </tr> <tr> <td>2</td> <td>小灰灰</td> <td>12000</td> <td> <a href="#" onclick="update(this)">修改</a> <a href="#" onclick="del(this)">删除</a> </td> </tr> </table> </body> </html>
希望能对大家有所帮助，欢迎一键三连。