Delete all rows on a table except first with Javascript
Question
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.
<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>
6 answers
solution1
9 2013-04-29 01:45:10
Can you use jQuery?
$("#bowlerList:not(:first)").remove();
Reference here: jQuery select all except first
solution2
6 2013-07-25 02:30:46
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
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.
solution3
4 2013-04-29 02:27:19
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:
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 table is 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.rows[0].cells[0].innerHTML = "whatever";
solution4
3 2017-10-05 02:53:08
for(var i = 1;i<table.rows.length;){
table.deleteRow(i);
}
This simple code will delete all except the first row in any table.
solution5
1 2013-04-29 01:54:43
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
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>
solution6
0 2022-05-17 13:17:55
The first row always has the index of 0. So just loop through using for loop and deleteRow(1). The logic being every row will eventually be row (1) at some point. After the loop you can then check for the table row count. Using table.rows.length. If it is equal to one then print your table is empty.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.