Question

如何使用除第一个之外的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()' /> &nbsp;";
    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>

Answer 1

你能使用jQuery吗？

$("#bowlerList:not(:first)").remove();

参考此处：jQuery select all except first

Answer 2

删除除第一行（第一行可能是表的标题行）之外的所有行如上面的示例代码所示，表ID为bowlerList

var mytbl = document.getElementById("bowlerList");
mytbl.getElementsByTagName("tbody")[0].innerHTML = mytbl.rows[0].innerHTML;

这并未针对速度进行优化，但一次删除多行非常简单快捷。

Answer 3

除了第一行之外，还有很多方法可以删除除第一行之外的所有内容。可能最简单，最慢的是删除最后一行，直到只留下一行：

function clearTable(table) {
  var rows = table.rows;
  var i = rows.length;
  while (--i) {
    rows[i].parentNode.removeChild(rows[i]);
    // or
    // table.deleteRow(i);
  }
}

或者，如果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]);
}

其中 table 是对DOM表元素的引用。还有很多其他方法可以解决，上面应该可以使用。要替换第一行中第一个TD的内容，您可以执行以下操作：

table.rows[0].cells[0].innerHTML = "whatever";

Answer 4

and change it to "Your team roster is empty".

如果删除除第一行之外的所有行，那么您的“团队名单”不能为空，所以我跳过了那部分。

I want to create a function that removes all rows except the first one

见下面的代码

<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()' /> &nbsp;";
    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>

Answer 5

for(var i = 1;i<table.rows.length;){
            table.deleteRow(i);
        }

这个简单的代码将删除除了任何表中第一行以外的所有代码。

删除表上的所有行，除非先使用Javascript

5 个答案: