我使用Javascript function addRow(id)
创建了新行,但我无法将其删除。当我单击删除按钮时,没有任何反应。我究竟做错了什么?
我很感激任何建议。
<table>
<tr>
somethingElse
</tr>
<tr>
<td colspan="5">
<script type="text/javascript">
var inputCount = 0;
function addRow(id) {
//set row number
inputCount++;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
var td3 = document.createElement("TD");
var td4 = document.createElement("TD");
var td5 = document.createElement("TD");
var t1 = document.createElement('div');
var t2 = document.createElement('div');
var t3 = document.createElement('div');
var t4 = document.createElement('div');
var t5 = document.createElement('div');
t1.innerHTML = "Name of school: ";
t2.innerHTML = "<input type='text' Width='180px' name='items_" + inputCount + "'>";
t3.innerHTML = "Title aquired: ";
t4.innerHTML = "<input type='text' Width='180px' name='value_" + inputCount + "'>";
t5.innerHTML = "<input type='Button' class='Button' onclick='deleteLine(this)' value='Remove'>";
td1.appendChild(t1)
td2.appendChild(t2)
td3.appendChild(t3)
td4.appendChild(t4)
td5.appendChild(t5)
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);
}
function deleteLine(object) {
var table = document.getElementsByTagName("myTable")[0];
var tBody = table.getElementsByTagName("tbody")[0];
var rows = tBody.getElementsByTagName("tr");
while (object.tagName != 'TR') {
object = object.parentNode;
}
var row = rows[object.rowIndex];
tBody.removeChild(row);
}
</script>
<table id="myTable">
<tr>
<td align=right>
Name of school:
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="180px"></asp:TextBox>
</td>
<td align=right>
Title aquired:
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="180px"></asp:TextBox>
</td>
<td>
<a href="javascript:addRow('myTable')">Add more education</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
somethingElse
</tr>
</table>
答案 0 :(得分:5)
我猜这个
var table = document.getElementsByTagName("myTable")[0];
最好是
var table = document.getElementById("myTable");
如果您想要这个功能可以更简单:
function deleteLine(object) {
while (object.tagName != 'TR') {
object = object.parentNode;
}
object.parentNode.removeChild(object);
}
答案 1 :(得分:0)
您也可以试试这个。 ...
<script type="text/javascript">
var inputCount = 0;
function addRow(id) {
//set row number
inputCount++;
var tbody = document.getElementById(id);
html=""
var row = document.createElement("TR");
row.setAttribute("id", "row"+inputCount)
tbody.appendChild(row);
html +="<td>Name of school:</td>"
html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>"
html +="<td>Title aquired: </td>"
html +="<td><input type='Button' class='Button' onclick=deleteLine('row"+inputCount+"') value='Remove'></td>"
alert(html)
row.innerHTML = html
}
function deleteLine(index) {
table = document.getElementById("myTable")
row = document.getElementById(index)
table.removeChild(row);
}
</script>