用JS怎样写添加表格和删除功能，代码是什么-群英

上一篇：vue用户登录切换实现及常见问题如何处理下一篇：用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 >