Duplication of rows in Javascript Table

问题

I am quite new to javascript and for some time now i cant figure a solution to a problem that i have on my own. The web application i am building is using javavascript and Firebase. I am creating a table that pulls some data from mysql and display them as a table in my website. The table consists of three columns ID,NAME, AND SURNAME.Along with that i am also creating a new column called Recipient that consists of buttons. The table looks like this:

I give a different value to each of the buttons, the value of each button is the number of the ID that is in the same row as the current button. For example the first button has a value = 2, the 3rd a value = 123. Al the buttons have an id = contact

The source code of the table is

$con = mysql_connect("localhost","root",'');
   if(!$con){

   die("Cannot Connect" . mysql_error());

   }
    mysql_select_db("client_app",$con);
    $get_user_clients = "SELECT `ID`,`Name`,`SurName`,`storagefolder` FROM `clients`  ";
   $clients = mysql_query($get_user_clients,$con);

   echo "<table class=table table-condensed>
   <thead>
   <tr>   
   <th>ID</th>
   <th>Name</th>
   <th>SurName</th>
   <th>Recipient</th>
   </tr>
   </thead>";
   while($record = mysql_fetch_array($clients)){
    echo "<action=usersfiles.php method=post>";
    echo "<tr>";
    echo "<td>".$record['ID']." </td>";
    echo "<td>".$record['Name']." </td>";
    echo "<td>".$record['SurName']." </td>";
    echo "<td>"."<button   value=".$record['ID']." id=contact>Folder Data</button>"." </td>";
    echo "</tr>";
    echo "</form>";

     }

echo "</table>"; 

When i click on a button from the table the application get the value of the corresponding button and store it in a variable, then it sends the variable to a function that will drug all the files from firebase database that are store in the folder with the same name as the variable, And then it will display them.

My firebase Database

So for example when I click on the button of the first column I will get the files that are stored in the folder with name 2 form firebase.database. The result of after I click the first button will be this:

My source code works fines as it gets the files from the corresponding folders from firebase.database. The problem that i have is when i dont refresh the page and i click a button again then the outpout will be the result of the previous button click plus the new one. For example if i dont refresh my page and i click the second button to get the files from the file from database with the name = 3 the outpout will be :

The outpout is a merging of all the results that i have oupouted so far. If i refresh my page and click on the second button now i will get the result i want which it is:

How can i edit my source code so the tables wont merge?

My source code is the follwing:

Source code of saving the value after button is clicked and passsing it to function:

var contactName; //prepare var to save contact name/ PLACE outside document ready
$(function() {
 // contact form animations
 $('button[id="contact"]').click(function() {
   contactName = $(this).val(); //set var contactName to value of the pressed button
   store(contactName);
    $('#contactForm').fadeToggle();

  })
  $(document).mouseup(function (e) {
    var container = $("#contactForm");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();

    }
  });

});

Source code of function receiving the value and displays the corresponding file from firebase database:

function store(value){

var tblUsers = document.getElementById('tbl_users_list');
var databaseRef =  firebase.database().ref().child(`files/${value}/`);
var rowIndex = 1;

databaseRef.once('value',function(snapshot){
snapshot.forEach(function(childsnapshot) { 
var childKey = childsnapshot.key;
var childData = childsnapshot.val();
//var urls = childData.url;

var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var button = row.insertCell(2);

var itd = document.createElement('input');
itd.setAttribute("type","button");
itd.setAttribute("value","View");
itd.onclick=function () {
window.open(childData.url);
};

cellId.appendChild(document.createTextNode(childData.filename));
cellName.appendChild(document.createTextNode(childData.created));
button.appendChild(itd);

rowIndex = rowIndex+1;
//document.write(username);


})


  });

}

Thanks in Regards

回答1:

You only append data to the existing table, without ever removing existing rows in the table:

var row = tblUsers.insertRow(rowIndex);

You should make sure to remove all existing rows before adding the new one(s):

for (var i = tblUsers.rows.length; i >= 0; i--) {
    tblUsers.deleteRow(i - 1);
}

来源：https://stackoverflow.com/questions/49149236/duplication-of-rows-in-javascript-table