用原生Dom实现向表格中添加数据

最新推荐文章于 2023-01-24 15:30:57 发布

weixin_30478619

最新推荐文章于 2023-01-24 15:30:57 发布

阅读量321

点赞数

原文链接：http://www.cnblogs.com/xiaoluoli/p/5857446.html

版权

用原生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>

转载于:https://www.cnblogs.com/xiaoluoli/p/5857446.html

weixin_30478619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生Dom实现向表格中添加数据

用原生Dom实现向表格中添加数据<script> document.getElementById("submit").onclick=function(){ //获取输入节点 var name=document.getElementById("iname"); var email=document.getElem...
复制链接

扫一扫