javascript动态填写html表格内容

我不是女神ヾ 2022-10-28 10:20 215阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>js table demo</title>
        </head>
        <body>
            name：<input type="text" value=""/><br>
            sex：<input type="text" value=""/><br>
            address：<input type="text" value=""/>
            <input id="btn" type="button" value="submit"/ onclick="add();">
            <table border="1px" id="tab1">
                <tr>
                    <th>name</th>
                    <th>sex</th>
                    <th>address</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>man</td>
                    <td>aaa 101</td>
                </tr>
            </table>
            
            <script>
                function add(){
                    var aInput = document.getElementsByTagName('input');//读取所有input形成一个
    
    数组
                    var table = document.getElementById("tab1");//取得表格
                    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>

var aInput = document.getElementsByTagName('input');     获取3个input元素；  
表格要有id，然后可以取得表格，  
                var table = document.getElementById("tab1");//取得表格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: /images/20221024/a6825de60bfa4550a2ffadfcc2f6fb8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: /images/20221024/dcccb8963e0b492b9f27e5a0f7bf12a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 2]: /images/20221024/f3060b986b194e55b9818d76352911af.png