Question

我觉得很难为这个问题创建一个标题，但我真正想知道的是如何使我的代码（创建从输入值派生的表）停止每次事件发生时堆叠表。就像我输入＆＃34; 2 ＆＃34;它会创建 2 表，但是当我输入＆＃34; 3 ＆＃34;它会添加 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>

Answer 1

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

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

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

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

Answer 2

首先在myfunction（）中删除表中的现有行，然后追加您正在创建的行。

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

表堆叠而不是替换

2 个答案: