Adding new row to HTML table dynamically with JScript

Question

I am writing a code in HTML + Jquery and need to add rows to a table dynamically.

I've written the code to add the rows dynamically, but it doesn't seem to work.

Here is my JScript code :

<script language="JavaScript">
        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("input");
            element1.type = "date";
            element1.name="datebox[];
            element1.id = "dt";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;
            var element2 = document.createElement("input");
            element2.type = "select";
            element2.name = "selectbox[]";
            element2.id = "slct";
            cell2.appendChild(element2);

            var cell3 = row.insertCell(2);
            cell3.innerHTML = rowCount + 1;
            var element3 = document.createElement("input");
            element3.type = "text";
            element3.name = "txtbox[]";
            element3.id = "txt";
            cell3.appendChild(element3);
            table.appendChild(cell1);
        }
    </script>

This is my Table:

<table id = "tab" style="width:500px">
    <tr>
        <th>Date</th>
        <th>Treatment Goal</th>
        <th>Comment</th>
    </tr>
    <tr>
        <td><INPUT type="date" name="datebox[]" id = "dt"/></td>
        <td>
            <SELECT name="selectbox[]" id = "slct">
            </SELECT>
        </td>
        <td><INPUT type="text" name="txtbox[]" id = "txt"/></td>
    </tr>
</table>

I am calling the function in the onClick event of a button like this :

<input type="button" id="add" value="+" name="Add" onclick="addRow('tab')"/>

The html page doesn't respond to the click event and nothing happens. Cannot understand what's going wrong.

MrCode · Accepted Answer · 2014-04-15 18:00:37Z

1

Working Fiddle

The first problem is a syntax error on this line (you didn't close the double quote):

element1.name="datebox[];
                        ^ missing "

The second problem is you are appending the cell to the table which is wrong, you should be appending the row:

table.appendChild(row);
                  ^ changed to row from cell

answered Apr 15, 2014 at 18:00

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

Comments

Aboba · Accepted Answer · 2014-04-15 18:00:53Z

1

You are missing a quotation mark on the line:

element1.name="datebox[];

after the name element.

answered Apr 15, 2014 at 18:00

Aboba

2861 silver badge10 bronze badges

Collectives™ on Stack Overflow

Adding new row to HTML table dynamically with JScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related