js动态生成表单和表格

Anthony_Z 2014-07-14 12:36:00

我想在JS里面动态添加表格，并且每行里面有一个表单。但是在添加列的时候，无论加多少列。整行的宽度都只等于第一列的宽度，如图所示。请问要怎么样改才能让它生成一个正常的表格。。。

[code=php]

[/code]
var row,cell; //定义表格的行和列
var table=document.getElementById('glhdtable');
for(var i=0;i<hdlength;i++)
{
row=table.insertRow(table.rows.length);
var form=document.createElement('form');
form.name="glhd"+i;
form.id="glhd"+i;
form.action="delete_P.php";
row.appendChild(form); //创建行和表单

var td1=document.createElement('td');
td1.width="50px";
td1.height="30px";
form.appendChild(td1);
var cell1=document.createElement('input');
cell1.type="checkbox";
cell1.value="1";
cell1.id="glhdcheckbox"+i;
cell1.name="glhdcheckbox"+i;
cell1.onclick="ccb();"
td1.appendChild(cell1); //第一列，复选框

var td2=document.createElement('td');
td2.width="200px";
td2.height="30px";
form.appendChild(td2);
}

...全文

482 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

豪情 2014-07-14

打赏
举报

引用 5 楼 u014202721 的回复:

引用
4
你这样子插入表单的话就会出现我那个问题。。

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

Anthony_Z 2014-07-14

打赏
举报

引用

4

你这样子插入表单的话就会出现我那个问题。。

豪情 2014-07-14

打赏
举报

引用 3 楼 u014202721 的回复:

那请问怎么在每行里面都添加一个表单？？？

理论上是这样可以添加的，但是添加之后，由于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>

Anthony_Z 2014-07-14

打赏
举报

那请问怎么在每行里面都添加一个表单？？？

豪情 2014-07-14

打赏
举报

刚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>

豪情 2014-07-14

打赏
举报

写的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>