Tables are stacking instead of replacing

Question

I find it hard to create a title to this question but what I really want to know is how to make my code (that creates tables derived from the value of an input) stop from stacking up tables every time an event is made. like when I input "2" it creates 2 tables but when I input "3" it adds 3 tables thus, 5 tables are made instead of just 3.

I want want my code to create tables derived from the input box rather than stacking it up. How can I achieve this?

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

Your script does not create tables, it creates table _rows_ and appends them to an existing table. And depending on what you actually want, you should either create a new table and append it to the `body` element (if a new table each time is what you want), or remove all existing table rows from the one table before creating new ones. — CBroe, Jul 11 '15 at 06:41

score 1 · Answer 1 · 2015-07-11T20:20:39.287

1

What you are doing is adding more elements to the added ones. What you need to do first is clear the contents of table and recreate it. You can achieve this by adding just one line at the beginning of myfunction()

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

This will clear all contents of mytable before recreating it.

edited Jul 11 '15 at 20:20

answered Jul 11 '15 at 06:55

Thank you for your answer, you've helped me a lot! – John Vincent Javier Jul 11 '15 at 07:11
1

@JohnVincentJavier: Serving the purpose of this site. Cheers ! – Jul 11 '15 at 20:17

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

Remove the existing rows in the table first in the myfunction() and then append the rows you are creating.

answer by ramicious works, but you can find the best way to remove existing rows in a table in the following post Delete all rows in an HTML table.

edited May 23 '17 at 12:07

Community

1
1

answered Jul 11 '15 at 07:37

vchethan

113
1
8

That also worked, though I find ramiciou's answer more convenient. thank you so much! – John Vincent Javier Jul 12 '15 at 07:28

Tables are stacking instead of replacing

2 Answers2