删除表上的所有行，但使用Javascript删除第一行除外_Javascript

删除表上的所有行，但使用Javascript删除第一行除外

javascript

删除表上的所有行，但使用Javascript删除第一行除外,javascript,Javascript,如何使用Javascript删除表中除第一行之外的所有行？这是我的代码，我想创建一个函数，删除除第一行之外的所有行，并将其更改为“您的团队花名册为空”。我需要Javascript代码 <script type="text/javascript"> /* <![CDATA[ */ var flag = true; function addBowler() { if(flag){ document.getElementById("bowlerList").

如何使用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>


/*  */
中央谷巷
2008年保龄球队
保龄球手姓名：

球队名册
你的球队名单是空的

您能使用jQuery吗

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

此处参考：

如果删除除第一行以外的所有行，则“团队花名册”不能为空，因此我跳过了该部分

我想创建一个函数，删除除第一行以外的所有行

请参阅下面的代码

<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>


/*  */
中央谷巷
2008年保龄球队
保龄球手姓名：

球队名册
你的球队名单是空的

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

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.rows[0].cells[0].innerHTML = "whatever";

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

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.rows[0].cells[0].innerHTML = "whatever";

删除除第一行以外的所有行（第一行可能是表的标题行）与上面的示例代码一样，表id是

bowlerList

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

这并不是为了速度而优化的，但是一次删除多行很容易而且很快。

for（var i=1；iour教授不想让我们使用jQuery:s你能把它翻译成JAvascript吗？你的教授？这是你的家庭作业吗？！不要让我给你讲我的孩子们做你自己的工作！：-）但是我真的需要这些代码：我现在很累，我只想让removePlayer代码在选择方面与Javascript到Jquery中的代码类似。所以成员们不太喜欢帮助学生做家庭作业（你的代码现在是公开的，如果你的一个同学无意中发现了它并决定复制它，那么事情就会变得一团糟。）只是提醒一下。如果我做你的作业，我也会毕业吗？我知道jQuery不是一个选项，您可以将您的用户群限制为符合CSS3的浏览器吗？如果是这样，您可以使用MJ Hufford建议的几乎相同的语法document.queryselectoral（“#bowlerList tr:not（：first child）”）
将获得一个元素数组，然后您可以迭代它们并document.getElementById（#bowlerList”）.removeChild（this元素）Them看看这个答案，为什么有三个新功能O-1在OP建议他不能使用jQuery之后使用jQuery，同时它也没有标记Edit:no wait-我看到了OP的原始代码中的内容。。。这很奇怪。我收回了我的-1好sir，你没有注意到我没有使用任何JQuery吗？我刚刚粘贴了OP中的代码，并将函数留在那里。在我编写代码时，OP改变了这个问题——没有新函数。这些只是最初在代码中使用的函数。下次发帖前请仔细计划你的问题，否则愿意帮助的用户可能会获得否决票。@ambonjingness“有人可以修改此代码吗…”与“请为我这样做，因为互联网是免费劳动力的来源”接近得很危险如果您首先对慷慨提供给您的代码进行了一次尝试，看看您是否能够自己实现它，然后对您尝试过的内容进行评论，如果您无法理解，那么您可能会得到更好的响应。由于这似乎是一个学院/大学/学校项目，你也将通过这种方式从你的教育中获得最大的价值。
for(var i = 1;i<table.rows.length;){
            table.deleteRow(i);
        }