实现：增、删、改、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="/day3/jquery-3.4.1.min.js"></script> <style> *{ margin:0 auto; padding: 0; text-align: center; cursor: pointer; } body{ width: 100%; height: 100%; background-color: cornsilk; } .containt{ width: 700px; height: 300px; line-height:30px ; margin-top: 50px; margin-bottom: 10px; } button{ width: 60px; height: 30px; background-color: rgba(184, 98, 183, 0.544); border-radius: 10px; } tr th ,tr td{ width: 50px; height: 30px; line-height: 30px; padding: 10px; text-align: center; } </style> </head> <body> <div class="containt"> 姓名：<input type="text" id="userName"> <br/> 男<input type="radio" name="sex" value="男" checked> 女<input type="radio" name="sex" value="女"> <br/> 唱歌<input type="checkbox" value="唱歌"> 跳舞<input type="checkbox" value="跳舞"> 打篮球<input type="checkbox" value="打篮球"> <br/> <select name="" id="city"> <option value="0">请选择</option> <option value="1">河南</option> <option value="2">山东</option> <option value="3">湖北</option> <option value="4">陕西</option> <option value="5">山西</option> </select> <br/> <textarea name="" id="msg" cols="30" rows="10"></textarea> <br/> <button id="add">添加</button> <input type="text" id="index" > <button id="update">确认修改</button> </div> <table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>爱好</th> <th>城市</th> <th>介绍</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <!-- <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <button>删除</button> <button>修改</button> </td> </tr> --> </tbody> </table> <script src="./form.js"></script> </body> </html> //jquery代码 var i=0; //添加 $("#add").click(function(){ var userName=$("#userName").val(); //单选框 var sex = $(".containt>:radio:checked").val(); // 复选框 var checkbox = $(".containt>:checkbox:checked") var hobby = [] checkbox.each(function (i, v) { hobby.push($(v).val()) }) //下拉框 var city=$("#city>:selected").text(); var msg=$("#msg").val(); var trDom=$(` <tr> <td>${i}</td> <td>${userName}</td> <td>${sex}</td> <td>${hobby.join("-")}</td> <td>${city}</td> <td>${msg}</td> <td> <button class="del">删除</button> <button class="edit">修改</button> </td> </tr> `); $("#tbody").append(trDom); i++; }) //删除 $("#tbody").on("click",".del",function(){ $(this).parent().parent().remove(); }) //修改 $("#tbody").on("click",".edit",function(){ $("#update").show(); $("#add").hide(); var trDom=$(this).parent().parent(); var tds=trDom.children(); $("#userName").val($(tds[1]).text()) $("#containt>:radio").each(function(i,v){ if( $(v).val()==$(tds[2]).text() ){ $(v).prop("checked",true) }else{ $(v).prop("checked",false) } }) var hobby=$(tds[3]).text().split("-"); //console.log(hobby); //清空选中的 $("#containt>:chenckbox").each(function(i,v){ $(v).prop("checked",false); }) //选中 for(var i=0;i<hobby.length;i++){ $("#containt>:checkbox").each(function(j,v){ if(hobby[i] == $(v).val()){ //console.log(v); $(v).prop('checked',true) } }) } //下拉框 $("#city").children().each(function(i,v){ if( $(v).val()==$(tds[4]).text() ){ $(v).prop("selected",true) }else{ $(v).prop("selected",false) } }) //文本域 $("#msg").val($(tds[5]).text()) //序号 $("#index").val( $(tds[0]).text() ); }) //确认修改 $("#update").on("click",function(){ var userName=$("#userName").val(); //单选框 var sex = $(".containt>:radio:checked").val(); // 复选框 var checkbox = $(".containt>:checkbox:checked") var hobby = [] checkbox.each(function (i, v) { hobby.push($(v).val()) }) //下拉框 var city=$("#city>:selected").text(); var msg=$("#msg").val(); var index=$("#index").val(); var tr=$("#tbody tr").eq(index).children(); $(tr[1]).text(userName); $(tr[2]).text(sex); $(tr[3]).text(hobby.join("-")); $(tr[4]).text(city); $(tr[5]).text(msg); $("#update").hide(); $("#add").show(); })