Javascript 如何使用Javascript删除表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3942446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 06:45:03 来源:igfitidea点击:
How to delete table row using Javascript
提问by Slavisa
I have created new rows using Javascript function addRow(id), but I can't delete it. When I click the remove button, nothing happens. What am I doing wrong?
I'm grateful for any advice.
我使用 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>
回答by Dr.Molle
I guess this
我猜这个
var table = document.getElementsByTagName("myTable")[0];
should better be
最好是
var table = document.getElementById("myTable");
the function can be made simpler if you want to:
如果您想，该功能可以变得更简单：
function deleteLine(object) {
while (object.tagName != 'TR') {
object = object.parentNode;
}
object.parentNode.removeChild(object);
}
回答by Michal
You can also try this. ...
你也可以试试这个。...
<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>
