Cannot add table row using javascript

Question

I've a piece of code for adding/deleting table rows on button click using javascript. My table having one dropdown menu with two textbox fields and one field for delete button.
This is my table.

This is my HTML Code.

<table id="tbl" border="1">
        <tr>
            <td>Group</td>
            <td>Subject</td>
            <td>Reg.Number</td>
            <td>Delete?</td>

        </tr>
        <tr>
            <td> <select id='group'>
                    <option value='0'>----------</option>
                 </select></td>
            <td> <input type="text" id="sub" /></td>
            <td><input  type="text" id="regno" /></td>
            <td><input type="button" id="del" value="Delete" onclick="deleteRow(this)"/></td>

        </tr>
    </table>
    <input type="button" id="addmore" value="Add more" onclick="insRow()"/>

My Javascript code

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('tbl').deleteRow(i);
}


function insRow()
{
    console.log( 'hi');
    var x=document.getElementById('tbl');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;   
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    x.appendChild( new_row );
}

The problem that I'm facing is little bit strange, means, if I add one more dropdown list in the table , the "add" function will not work. I tried everything, googled, read many articles but none of them helped me. Please help me to solve my issue. Thanks.

you should see your browser's console for possible errors. In your second fiddle, new_row.cells[1] do not have any input element and your code will break at line inp1.id as inp1 is null — Easwar Raju
– Easwar Raju, Commented Mar 17, 2016 at 6:27

Vasyl Moskalov · Accepted Answer · 2016-03-17 06:29:34Z

2

Just replace .getElementsByTagName('input') to .getElementsByTagName('select') http://jsfiddle.net/2fk4L6fj/1/

answered Mar 17, 2016 at 6:29

Vasyl Moskalov

4,6403 gold badges24 silver badges30 bronze badges

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

Comments

Kiran RS · Accepted Answer · 2016-03-17 07:25:40Z

2

when you can't find the problem in your code , please press Button 'F12' and see what print in 'Console' then you will find it.

edited Mar 17, 2016 at 7:25

Kiran RS

96914 silver badges33 bronze badges

answered Mar 17, 2016 at 6:32

willxiang

2913 silver badges6 bronze badges

Collectives™ on Stack Overflow

Cannot add table row using javascript

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