2

除了第一行之外，如何使用 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>
4

5 回答 5

9

可以使用 jQuery 吗？

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

参考这里：jQuery全选，除了第一个

于 2013-04-29T01:45:10.180 回答
6

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

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

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

于 2013-07-25T02:30:46.707 回答
4

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

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";
于 2013-04-29T02:27:19.110 回答
3 
for(var i = 1;i<table.rows.length;){
            table.deleteRow(i);
        }

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

于 2017-10-05T02:53:08.997 回答
1 
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>
于 2013-04-29T01:54:43.977 回答