删除表上的所有行，但首先使用 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16270087/
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
Delete all rows on a table except first with Javascript
提问by ambonjingness
How do you delete all rows on a table with Javascript except the first one? Here's my code, I want to create a function that removes all rows except the first one and change it to "Your team roster is empty". I need the Javascript code for that.
除了第一行之外，如何使用 Javascript 删除表中的所有行？这是我的代码，我想创建一个删除除第一行以外的所有行并将其更改为“您的团队名册为空”的函数。我需要 Javascript 代码。
<script type="text/javascript">
/* <![CDATA[ */
var flag = true;
function addBowler() {
if(flag){
document.getElementById("bowlerList").deleteRow(0);
flag = false;
}
var removeButton = "<input type='button' value='remove' onclick='removePlayer()' /> ";
var newBowler = document.getElementsByName('bowlersName')[0].value;
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.innerHTML = newBowler + removeButton;
document.getElementById("bowlerList").appendChild(tr);
}
function removePlayer() {
}
/* ]]> */
</script>
</head>
<body>
<!-- HEADER 1 & 2 -->
<h1>Central Valley Lanes</h1>
<h2>2008 Bowling Teams</h2>
<p>Bowler's name:<input type="text" name="bowlersName" size="15" />
<input type="button" value="Add Bowler" onclick="addBowler()" /></p>
<h2>Team Roster</h2>
<form action="FormProcessor.html" method="get" >
<table border="1" id="bowlerList">
<tr><td id="empty">Your team roster is empty</td></tr>
</table>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
回答by MJ Hufford
Can you use jQuery?
你会使用 jQuery 吗？
$("#bowlerList:not(:first)").remove();
Reference here: jQuery select all except first
参考这里：jQuery 选择所有除了第一个
回答by mycafecup
To delete all of the rows except for the first row (which the first row might be the table's header row)
as in your sample code above, the table id is bowlerList
要删除除第一行（第一行可能是表格的标题行）以外的所有行，如上面的示例代码所示，表格 ID 为 bowlerList
var mytbl = document.getElementById("bowlerList");
mytbl.getElementsByTagName("tbody")[0].innerHTML = mytbl.rows[0].innerHTML;
This is not optimized for speed, but it's easy and fast for deleting many rows at once.
这并未针对速度进行优化，但一次删除多行既简单又快速。
回答by RobG
There are a number of ways to remove all but the first row. Probably the simplest, and slowest, is to remove the last row until there's only one left:
有多种方法可以删除除第一行之外的所有内容。可能最简单、最慢的方法是删除最后一行，直到只剩下一行：
function clearTable(table) {
var rows = table.rows;
var i = rows.length;
while (--i) {
rows[i].parentNode.removeChild(rows[i]);
// or
// table.deleteRow(i);
}
}
Or, if there are no listeners on the tBody you can do:
或者，如果 tBody 上没有侦听器，您可以执行以下操作：
function clearTable(table) {
var firstRow = table.rows[0];
var tBody = table.tBodies[0].cloneNode(false);
tBody.appendChild(firstRow);
table.replaceChild(tBody, table.tBodies[0]);
}
where tableis a reference to a DOM table element. There are many other ways to go about it, the above should work everwhere. To replace the content of the first TD in the first row, you can do:
其中table是对 DOM 表元素的引用。还有很多其他方法可以解决，上面的方法应该适用于任何地方。要替换第一行中第一个 TD 的内容，您可以执行以下操作：
table.rows[0].cells[0].innerHTML = "whatever";
回答by Saturnix
and change it to "Your team roster is empty".
If you remove all the rows except the first one, then your "team roster" cannot be empty so I've skipped that part.
如果您删除除第一行之外的所有行，那么您的“团队名册”不能为空，因此我跳过了那部分。
I want to create a function that removes all rows except the first one
I want to create a function that removes all rows except the first one
see code below
看下面的代码
<script type="text/javascript">
/* <![CDATA[ */
var flag = true;
var count = 0;
function addBowler() {
if(flag){
document.getElementById("bowlerList").deleteRow(0);
flag = false;
}
var removeButton = "<input type='button' value='remove' onclick='removePlayer()' /> ";
var newBowler = document.getElementsByName('bowlersName')[0].value;
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.innerHTML = newBowler + removeButton;
tr.id = count;
document.getElementById("bowlerList").appendChild(tr);
count++;
}
function removeAll(){
for(var x = 1; x<count; x++)
removeElement(document.getElementById(x))
count = 1;
}
function removeElement(el) {
el.parentNode.removeChild(el);
}
/* ]]> */
</script>
</head>
<body>
<!-- HEADER 1 & 2 -->
<h1>Central Valley Lanes</h1>
<h2>2008 Bowling Teams</h2>
<p>Bowler's name:<input type="text" name="bowlersName" size="15" />
<input type="button" value="Add Bowler" onclick="addBowler()" /></p>
<h2>Team Roster</h2>
<form action="FormProcessor.html" method="get" >
<table border="1" id="bowlerList">
<tr><td id="empty">Your team roster is empty</td></tr>
</table>
<p><input type="submit" value="Submit" /></p>
<input type="button" value="removeall" onclick="removeAll()"/>
</form>
</body>
回答by Mohammad Anas Siddiquei
for(var i = 1;i<table.rows.length;){
table.deleteRow(i);
}
This simple code will delete all except the first row in any table.
这个简单的代码将删除任何表中除第一行之外的所有内容。
