Javascript表中的行重复 [英] Duplication of rows in Javascript Table

问题描述

我对javascript还是很陌生，一段时间以来，我找不到自己解决的问题的解决方案.我正在构建的Web应用程序正在使用javavascript和Firebase.我正在创建一个表，该表从mysql提取一些数据并将其显示为我的网站中的表.该表由三列ID，NAME和SURNAME组成.此外，我还创建了一个新的名为Recipient的列，该列由按钮组成.该表如下所示:

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:

我给每个按钮一个不同的值，每个按钮的值是与当前按钮在同一行中的ID号.例如，第一个按钮的值为= 2，第三个按钮的值为=123.所有按钮的ID为=联系人

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

表的源代码为

$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>"; 

当我从表中单击一个按钮时，应用程序将获取相应按钮的值并将其存储在变量中，然后它将变量发送到一个函数，该函数将存储来自Firebase数据库的所有文件与变量同名的文件夹，然后它将显示它们.

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.

我的Firebase数据库

My firebase Database

例如，当我单击第一列的按钮时，我将获取存储在名称为2的文件夹中的文件，格式为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:

我的源代码工作正常，因为它从firebase.database的相应文件夹中获取文件.我遇到的问题是，当我不刷新页面并再次单击一个按钮时，输出将是先前单击按钮加上新按钮的结果.例如，如果我不刷新页面，然后单击第二个按钮以从名称为3的数据库文件中获取文件，则输出将为:

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 :

outpout是到目前为止我已经完成的所有结果的合并.如果刷新页面并单击第二个按钮，我现在将得到我想要的结果:

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?

我的源代码如下:

单击按钮后保存值并将其传递给功能的源代码:

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();

    }
  });

});

函数的源代码接收该值并显示firebase数据库中的相应文件:

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


})


  });

}

在此致谢

推荐答案

您仅将数据追加到现有表中，而不会删除表中的现有行:

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);
}

这篇关于Javascript表中的行重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！