js添加表格内容


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js添加表格内容</title>
    </head>
    <body>
        姓名:<input type="text" value=""/><br>
        性别:<input type="text" value=""/><br>
        籍贯:<input type="text" value=""/>
        <input id="btn" type="button" value="提交"/ onclick="add();">
        <table border="1px" id="tablee">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
            <tr>
                <td>陈潮男</td>
                <td>男</td>
                <td>中国</td>
            </tr>
        </table>
        
        <script>
            function add(){
                var aInput = document.getElementsByTagName('input');//读取所有input形成一个数组
                var table = document.getElementById("tablee");//取得表格
                var oTr=document.createElement('tr');//给该表格创建tr节点
                table.appendChild(oTr);//创建table的子节点tr
                
                for(var i = 0; i < aInput.length-1; i ++){
                    var oTd=document.createElement('td');//创建td节点
                    oTd.innerHTML=aInput[i].value;//给创建的td节点赋值
                    oTr.appendChild(oTd);//将创建的td交给oTr节点tr
                }
            }
        </script>
    </body>
</html>2019-04-15

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM