<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.7.0.min.js"></script> <style> body { text-align: center; } form { display: none; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="10" style="width: 100%;"> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> <th>编辑</th> <th>删除</th> </tr> </table> <p> <input type="button" value="新增" id="add" /> </p> <form> <p> <label>姓名：<input id="name"></label> </p> <p> <label>爱好：<input id="hobby"></label> </p> <p> <input type="button" value="确定" id="ok"> <input type="button" value="取消" id="cannel"> </p> </form> <script> $(function() { let modifyTr = null; //修改行 //新增按钮点击事件 $("#add").click(function() { $("form").show(); //显示 modifyTr = null; }) //确定按钮点击事件 $("#ok").click(function() { let name = $("#name").val(); let hobby = $("#hobby").val(); if (name == "" || hobby == "") { alert("姓名或者爱好不能为空！！！") return; } if (modifyTr == null) { //新增一行 let tr = $("<tr>"); //取序号 let seq = 1; //默认序号1 if ($("tr").length != 1) { let n = $("tr:last>td:first").text(); seq = parseInt(n) + 1; } //序号td tr.append($("<td>").text(seq)); //姓名td tr.append($("<td>").text(name)); //爱好td tr.append($("<td>").text(hobby)); //编辑td tr.append($("<td>").html("<a class='update' href='#'>编辑</a>")); //删除td tr.append($("<td>").html("<a class='delete' href='#'>删除</a>")); $("table").append(tr); //清空表单 $("form")[0].reset(); } else { //修改 modifyTr.find("td:eq(1)").text($("#name").val()); modifyTr.find("td:eq(2)").text($("#hobby").val()); //清空表单 $("form")[0].reset(); //reset 重置 $("form").hide(); //hide 隐藏 } }) //编辑按钮点击事件 $("table").on('click', '.update', function() { modifyTr = $(this).parent().parent(); $('from').show(); //显示 //取得当前行的姓名和爱好 let hobby = $(this).parent().prev().text(); let name = $(this).parent().prev().prev().text(); // 给form表单的输入框赋值 $("#name").val(name); $("#hobby").val(hobby) }) //、删除按钮点击事件 $("table").on('click','.delete',function(){ $(this).parent().parent().remove(); }) //取消按钮点击事件 $("#cannel").click(function() { $('form').hide(); //隐藏 }) }) </script> </body> </html>
导入文件
jquery-3.7.0.min.js
