如何使用JavaScript单击按钮时自动添加列

Question

点击按钮时，我需要自动创建更多列。

我有一个addmember按钮。单击该按钮时，应创建成员姓名，父亲姓名，母亲姓名和DOB的文本框。

任何人都可以帮我这样做。

修改

我需要保留列名称并添加文本框。

修改

应添加列而不是行。这也只是添加了文本字段。

修改

任何人都可以帮我找到解决方案。

这就是我想要的东西::

添加Memeber-按钮

群组成员的名称textbox11 textbox12 textbox13 父名称textbox21 textbox22 textbox23 母亲姓名textbox31 textbox32 textbox33 DOB textbox41 textbox42 textbox43

第一列和第二列应该保持在那里。

当我第一次点击“添加成员”按钮时，应出现textbox12，textbox22，textbox32，textbox42。当第二次点击textbox13时，还应出现textbox23，textbox33和textbox43。

请有人帮我解决这个问题。

提前致谢， Amith

修改

任何人都可以帮我解决这个问题。请.....

Answer 1

使用Javascript动态追加新行。

<script>
    function addMember() {
        var table = document.getElementById("member_table");
        table.innerHTML =  table.innerHTML + "<tr> ... your table fields here ...</tr>"

    }
</script>

<input name="addMember" type="button" name="AddMember" value='Add Member' onclick="addMember()"/>

Answer 2

你可以使用这样的东西;

<input name="addMember" type="button" name="AddMember" value='Add Member' onclick="addRow('tableID')"/>


function addRow(tableID) { 
            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("font");
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);

        }

Answer 3

您可以尝试使用此功能：

function addMember()
{
    var tblBody = document.getElementById('member_table').tBodies[0];
    var newRow = tblBody.insertRow(-1);
    var newCell0 = newRow.insertCell(0);
    var newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.value = 'mothers name';
    newInput.style.color = 'blue';
    newCell0.appendChild(newInput);
    /* add more options like this ...*/
}