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