表是堆叠而不是替换答案

【问题标题】：Tables are stacking instead of replacing表是堆叠而不是替换
【发布时间】：2015-09-29 23:50:34
【问题描述】：

我发现很难为这个问题创建一个标题，但我真正想知道的是如何让我的代码（创建从输入值派生的表格）在每次发生事件时停止堆积表格.就像当我输入“2”时它会创建 2 表但是当我输入“3”时它会添加 3 表因此，制作了 5 个表格，而不仅仅是 3。

我希望我的代码创建从输入框派生的表格，而不是将其堆叠起来。我怎样才能做到这一点？

<html>
<body>
<input type="text" onblur="myfunction()" onchange="myfunction" id="dino">
<br>

<table id="mytable">

<script>
function myfunction() {

var value = document.getElementById("dino").value;


for (var i = 0; i < value; i++){
    var tr = document.createElement('tr');   


    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');


    var var_input_days = document.createElement("INPUT");
    var_input_days.setAttribute("type", "text");
    var_input_days.setAttribute("id", "ID_DAYS_" + [i]);
    var_input_days.setAttribute("value","DAYS_" + [i]);
    var_input_days.setAttribute("name", "DAYS_" + [i]);

    var var_input_name = document.createElement("INPUT");
    var_input_name.setAttribute("type", "text");
    var_input_name.setAttribute("id", "ID_NAME_" + [i]);
    var_input_name.setAttribute("value","NAME_" + [i]);
    var_input_name.setAttribute("name", "NAME_" + [i]);

    var var_input_data_ca = document.createElement("INPUT");
    var_input_data_ca.setAttribute("type", "text");
    var_input_data_ca.setAttribute("id", "ID_DATA_CA_" + [i]);
    var_input_data_ca.setAttribute("value","ID_DATA_CA_" + [i]);
    var_input_data_ca.setAttribute("name", "DATA_" + [i]);

    td1.appendChild(var_input_name);
    td2.appendChild(var_input_days);
    td3.appendChild(var_input_data_ca);

    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    document.getElementById("mytable").appendChild(tr);
}
document.body.appendChild(table);
}
</script>
</table>
</body>
</html>

【问题讨论】：

您的脚本不会创建表，它会创建表 rows 并将它们附加到现有表中。根据您的实际需要，您应该创建一个新表并将其附加到 body 元素（如果每次都需要一个新表），或者在创建新表之前从一个表中删除所有现有表行那些。
记好，谢谢！

标签： javascript html-table

【解决方案1】：

您正在做的是向添加的元素添加更多元素。您首先需要做的是清除表的内容并重新创建它。您可以通过在 myfunction()

的开头添加一行来实现此目的

document.getElementById("mytable").innerHTML="";

这将在重新创建之前清除 mytable 的所有内容。

【讨论】：

感谢您的回答，对我帮助很大！
@JohnVincentJavier：服务于本网站的目的。干杯！

【解决方案2】：

首先在 myfunction() 中删除表中的现有行，然后附加您正在创建的行。

ramicious 的回答有效，但您可以在以下帖子 Delete all rows in an HTML table 中找到删除表中现有行的最佳方法。

【讨论】：

这也有效，但我发现 ramiciou 的回答更方便。非常感谢！