how to add columns automatically when clicking a button using JavaScript

Question

I need to automatically create more columns when am clicking a button.

I have an addmember button. When am clicking that button, the text boxes for name of the member, fathers name, mother name and DOB should be created.

Can anyone help me in doing this.

EDIT

I need to keep the column name as such and add text boxes.

EDIT

Columns should be added and not rows. That too only text fields should be added.

EDIT

Can anyone help me in finding the solution.

This is what i want::

Add Memeber- Button

Name of group member textbox11 textbox12 textbox13 Father name textbox21 textbox22 textbox23 Mother name textbox31 textbox32 textbox33 DOB textbox41 textbox42 textbox43

First and second column should remain there evrytime.

When i click the "add member" button for the first time the textbox12, textbox22, textbox32, textbox42 should appear. And when clicked for the second time textbox13, textbox23, textbox33 and textbox43 should also appear.

Please can anyone help me in solving this.

Thanks in advance, Amith

EDIT

Can anyone help me in solving this problem. Please.....

You should really avoid using the FONT tag, use SPAN instead. — Jared Farrish
– Jared Farrish, Commented Nov 24, 2011 at 9:45

socha23 · Accepted Answer · 2011-11-24 09:51:34Z

2

Append new rows dynamically using 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()"/>

answered Nov 24, 2011 at 9:51

socha23

10.3k3 gold badges31 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

socha23 Over a year ago

Seems to work for me. Did you change ... your table fields here ... in my example to real HTML?

Amith Over a year ago

yes i have added my html code where u mentioned. But it is showing syntax error. This is the code.

Amith Over a year ago

function addMember() { var table = document.getElementById("member_table"); table.innerHTML = table.innerHTML + " <tr> <td align="center" width="10%">08. </td> <td width="30%" align="right">Name of the group member : <FONT color="red">*</FONT></td> <td width="30%" class="fieldcellwithinputwide" align="left" ><INPUT type="text" /></td> </tr> <tr> <td align="center" width="10%">09. </td> "}

socha23 Over a year ago

you are using double quotes in HTML you're adding. Javascript interprets first double quote as end of the string, and that causes syntax error. Switch to single quotes in appended HTML, or escape double quotes using backslash.

Amith Over a year ago

I have replaced the double quotes qith single quotes as below. Even then it is not working function addMember() { var table = document.getElementById("member_table"); table.innerHTML = table.innerHTML +" <tr><td align='center' width='10%'>08. </td> <td width='30%' align='right'>Name of the group member : </td> <td width='30%' class='fieldcellwithinputwide' align='left' ><INPUT type='text' /></td> </tr>" }

|

erimerturk · Accepted Answer · 2011-11-24 09:54:50Z

you can use something like this;

<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);

        }

eeerahul · Accepted Answer · 2011-11-24 10:21:50Z

1

You can try using this function:

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 ...*/
}

edited Nov 24, 2011 at 10:21

eeerahul

1,6254 gold badges27 silver badges41 bronze badges

answered Nov 24, 2011 at 10:01

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Collectives™ on Stack Overflow

how to add columns automatically when clicking a button using JavaScript

EDIT

EDIT

EDIT

EDIT

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

EDIT

EDIT

EDIT

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related