我有一段代码 adding/deleting table rows on button click using javascript 。我的表格有一个下拉菜单,其中有两个文本框字段和一个用于删除按钮的字段。
这是我的 table 。
这是我的 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 。我尝试了一切,用谷歌搜索,阅读了很多文章,但没有一篇对我有帮助。请帮助我解决我的问题。 谢谢。
最佳答案
只需将 .getElementsByTagName('input')
替换为 .getElementsByTagName('select')
http://jsfiddle.net/2fk4L6fj/1/
关于javascript - 无法使用 JavaScript 添加表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36053029/