Невозможно добавить строку таблицы, используя javascript

Question

У меня есть код для adding/deleting table rows on button click using javascript. Моя таблица имеет одно раскрывающееся меню с двумя полями текстового поля и одним полем для кнопки удаления.
Это мой стол.

Это - мой HTML-код.

<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()"/> 

Мой Javascript код

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 "add" function will not work. Я пробовал все, искал в googled, читал много статей, но никто из них не помог мне. Пожалуйста, помогите мне решить мою проблему. Спасибо.

Answer 1

Просто замените .getElementsByTagName('input') на .getElementsByTagName('select') http://jsfiddle.net/2fk4L6fj/1/

Answer 2

, когда вы не можете найти проблему в коде, пожалуйста, нажмите кнопку «F12» и посмотреть, что печать в то вы найдете его «Консоль».