首页 > 代码库 > 用原生Dom实现向表格中添加数据
用原生Dom实现向表格中添加数据
用原生Dom实现向表格中添加数据
<script> document.getElementById("submit").onclick=function(){ //获取输入节点 var name=document.getElementById("iname"); var email=document.getElementById("iemail"); var addresss=document.getElementById("iaddress"); //创建表格节点 var trNode=document.createElement("tr"); var checkboxNode=document.createElement("td"); var nameNode=document.createElement("td"); var emailNode=document.createElement("td"); var addressNode=document.createElement("td"); //向表格中添加创建的节点及文本内容 var border=document.getElementById("border"); border.appendChild(trNode); trNode.appendChild(checkboxNode); trNode.appendChild(nameNode); trNode.appendChild(emailNode); trNode.appendChild(addressNode); var checkboxText=document.createElement("input"); checkboxText.setAttribute("type","checkbox"); var nametextNode=document.createTextNode(name.value); var emailtextNode=document.createTextNode(email.value); var addresstextNode=document.createTextNode(addresss.value); checkboxNode.appendChild(checkboxText); nameNode.appendChild(nametextNode); emailNode.appendChild(emailtextNode); addressNode.appendChild(addresstextNode); } </script>
以下是html
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><title>向表格中编辑数据</title> </head> <body> <form id="form1"> <ul style="float:left; margin:30px 30px;list-style:none;"> <li>姓名：<input type="text" id="iname"></li> <li>邮箱：<input type="text" id="iemail"> </li> <li>地址：<input type="text" id="iaddress"></li> <li>添加：<input type="button" value="添加" id="submit"></li> </ul> </form> <table border="1" id="border" style="margin:30px;border:solid 1px gray;width:400px;text-align: center;"> <colgroup> <col width="50"/> <col width="100"/> <col width="100"/> <col width="200"/> </colgroup> <tr> <th><input type="checkbox" id="checkbox"></th> <th id="name">姓名</th> <th id="email">邮箱</th> <th id="address">地址</th> </tr> <tr> <td><input type="checkbox"></td> <td>张三</td> <td>1324354@qq.com</td> <td>湖北省</td> </tr> </table> </body> </html>
用原生Dom实现向表格中添加数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。