怎么新建MySQL数据库
发布时间：2022-10-21
作者：admin
阅读：313
阅读：313
这篇文章给大家分享的是“用JS怎样写添加表格和删除功能，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。
以上就是关于“用JS怎样写添加表格和删除功能，代码是什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
运行效果如图（两种实现方案，被注释的是第一种实现方案）
代码：
?<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > </ head > < style type = "text/css" > div{ text-align:center; box-sizing: border-box; width:100%; } #div1{ margin-left: 300px; width: 800px; margin-top: 50px; } #div2{ margin-left: 300px; width: 800px; padding-top:50px; } #table_id{ width: 580px; } </ style > < body > < div id = "div0" > < div id = "div1" > < input type = "text" id = "userid" placeholder = "请输入编号" /> < input type = "text" id = "username" placeholder = "请输入姓名" /> < input type = "text" id = "gender" placeholder = "请输入性别" /> < input type = "button" value = "添加" id = "add" /> </ div > < div id = "div2" > < table border = "1px" align = "center" id = "table_id" > < caption style = "font: '微软雅黑';font-size:20px;" >学生信息表</ caption > < tr > < th >编号</ th > < th >姓名</ th > < th >性别</ th > < th >操作</ th > </ tr > < tr > < td >1</ td > < td >令狐冲</ td > < td >张无忌</ td > < td >< input type = "button" value = "删除" style = "color: blue;" onclick = "delTr(this)" /></ td > </ tr > < tr > < td >1</ td > < td >令狐冲</ td > < td >张无忌</ td > < td >< input type = "button" value = "删除" style = "color: blue;" onclick = "delTr(this)" /></ td > </ tr > < tr > < td >1</ td > < td >令狐冲</ td > < td >张无忌</ td > < td >< input type = "button" value = "删除" style = "color: blue;" onclick = "delTr(this)" /></ td > </ tr > </ table > </ div > </ div > </ body > < script type = "text/javascript" > // 当点击添加按钮时触发下面的方法 document.getElementById("add").onclick=function(){ // 获取每个文本框中的内容 var id = document.getElementById("userid").value; var name = document.getElementById("username").value; var gender = document.getElementById("gender").value; /* // 添加id var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); // 添加username var td_username = document.createElement("td"); var text_username = document.createTextNode(name); td_username.appendChild(text_username); // 添加gender var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); // 添加按钮 var td_button = document.createElement("td"); var ele_input = document.createElement("input"); ele_input.setAttribute("type","button"); ele_input.setAttribute("value","删除"); ele_input.setAttribute("onclick","delTr(this)"); ele_input.style.color="blue"; td_button.appendChild(ele_input); var ele_tr = document.createElement("tr"); ele_tr.appendChild(td_id); ele_tr.appendChild(td_username); ele_tr.appendChild(td_gender); ele_tr.appendChild(td_button); var ele_table = document.getElementsByTagName("table")[0]; ele_table.appendChild(ele_tr);*/ // 使用innerHtml的方法动态添加表格 var tab = document.getElementsByTagName("table")[0]; tab.innerHTML+="< tr >\n"+ "< td >"+id+"</ td >\n"+ "< td >"+name+"</ td >"+ "< td >"+gender+"</ td >"+ "< td >< input type = 'button' value = '删除' onclick = 'delTr(this)' style = 'color:blue' /></ td >"+ "</ tr >" } function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </ script > </ html > |
以上就是关于“用JS怎样写添加表格和删除功能，代码是什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理