js动态生成表单和表格

写的td的数量不够，所以不对齐。
在线演示<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
</head>
<body>
<input id="btn" type="submit" value="插入"/>
<form action="">
    <table id="glhdtable" width="500" border="1">
        <tr>
            <th>111</th>
            <th>111</th>
            <th>111</th>
            <th>111</th>
            <th>111</th>
        </tr>
    </table>
</form>
<script type="text/javascript">
    var btn = document.getElementById('btn')
    var table = document.getElementById('glhdtable');
    var hdlength = 3;
    btn.onclick = function(){
        for(var i = 0; i < hdlength; i++){
            var tr = document.createElement('tr')
            var td1 = document.createElement('td');
            td1.innerHTML = '<input type="checkbox" value="1" onclick="ccb()" id="glhdcheckbox2" name="glhdcheckbox2">';
            tr.appendChild(td1);            var td2 = document.createElement('td');
            tr.appendChild(td2);
            var td3 = document.createElement('td');
            tr.appendChild(td3);
            var td4 = document.createElement('td');
            tr.appendChild(td4);
            var td5 = document.createElement('td');
            tr.appendChild(td5);
        }
        table.tBodies[0].appendChild(tr);
    }    function ccb(){
        console.log(11);
    }
</script>
</body>
</html>

解决方案 »

  1.   

    刚for循环写的有点问题，应该把table.tBodies[0].appendChild(tr);放在for里边去。
    在线demo<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>test</title>
    </head>
    <body>
    <input id="btn" type="submit" value="插入"/>
    <form action="">
        <table id="glhdtable" width="500" border="1">
            <tr>
                <th>111</th>
                <th>111</th>
                <th>111</th>
                <th>111</th>
                <th>111</th>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        var btn = document.getElementById('btn')
        var table = document.getElementById('glhdtable');
        var hdlength = 3;
        btn.onclick = function(){
            for(var i = 0; i < hdlength; i++){
                var tr = document.createElement('tr')
                var td1 = document.createElement('td');
                td1.innerHTML = '<input type="checkbox" value="1" onclick="ccb()" id="glhdcheckbox2" name="glhdcheckbox2">';
                tr.appendChild(td1);            var td2 = document.createElement('td');
                tr.appendChild(td2);
                var td3 = document.createElement('td');
                tr.appendChild(td3);
                var td4 = document.createElement('td');
                tr.appendChild(td4);
                var td5 = document.createElement('td');
                tr.appendChild(td5);
                table.tBodies[0].appendChild(tr);
            }
        }    function ccb(){
            console.log(11);
        }
    </script>
    </body>
    </html>
      

  2.   

    理论上是这样可以添加 的，但是添加之后，由于form不是table的原有结构，firefox会出现兼容问题。如果想提交数据，建议使用ajax提交。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>test</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    <input id="btn" type="submit" value="插入"/>
    <form action="">
        <table id="glhdtable" width="500" border="1">
            <tr>
                <th>111</th>
                <th>111</th>
                <th>111</th>
                <th>111</th>
                <th>111</th>
            </tr>
        </table>
    </form>
    <script type="text/javascript">
        var btn = document.getElementById('btn')
        var table = document.getElementById('glhdtable');
        var hdlength = 3;
        btn.onclick = function(){
            for(var i = 0; i < hdlength; i++){
                var tr = document.createElement('tr')
                var form = document.createElement('form');
                form.action = '';
                form.url = '';
                tr.appendChild(form);
                var td1 = document.createElement('td');
                td1.innerHTML = '<input type="checkbox" value="1" onclick="ccb()" id="glhdcheckbox2" name="glhdcheckbox2">';
                form.appendChild(td1);            var td2 = document.createElement('td');
                td2.innerHTML = '11'
                form.appendChild(td2);
                var td3 = document.createElement('td');
                form.appendChild(td3);
                var td4 = document.createElement('td');
                form.appendChild(td4);
                var td5 = document.createElement('td');
                form.appendChild(td5);
                tr.appendChild(form);            table.tBodies[0].appendChild(tr);
            }
        }    function ccb(){
            console.log(11);
        }
    </script>
    </body>
    </html>
      

  3.   


    你这样子插入表单的话就会出现我那个问题。。  
    现在给你的建议就是：
    不要把form插入到td里边去，插入就会出现那个问题。
    非要用数据提交，建议使用ajax方式。