CODEWITHSUNDEEP
javascripthtml
Kiran RS
Kiran RS

Reputation: 979

Cannot add table row using javascript


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.
table structure
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.

Upvotes: 0

Views: 204

Answers (2)

willxiang
willxiang

Reputation: 291

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.

enter image description here

Upvotes: 2

Vasyl Moskalov
Vasyl Moskalov

Reputation: 4630

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

Upvotes: 2

Related Questions