Javascript表中的行重复

我是javascript的新手，一段时间以来我无法找到解决我自己的问题的方法。 我正在构建的Web应用程序正在使用javavascript和Firebase。 我正在创建一个从mysql中提取一些数据并在我的网站中将它们显示为表的表。 该表由三列ID，NAME和AND SURNAME组成。与此同时，我还创建了一个名为Recipient的新列，其中包含按钮。 该表如下所示：

我给每个按钮赋予不同的值，每个按钮的值是与当前按钮在同一行中的ID的编号。 例如，第一个按钮的值为2，第三个按钮的值为123. Al按钮的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 ""; while($record = mysql_fetch_array($clients)){ echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; } echo "
 
 
 
ID
 
Name
 
SurName
 
Recipient
 
 
".$record['ID']." 
".$record['Name']." 
".$record['SurName']." 
"."Folder Data"." 
"; 

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

我的firebase数据库

因此，例如当我单击第一列的按钮时，我将获得存储在名为2的文件夹中的文件，forms为firebase.database。 单击第一个按钮后的结果将是：

我的源代码在从firebase.database中获取相应文件夹中的文件时会产生罚款。 我遇到的问题是，当我不刷新页面并再次单击按钮时，输出将是前一个按钮点击加上新按钮的结果。 例如，如果我不刷新我的页面，我点击第二个按钮从名为= 3的数据库中的文件中获取文件，输出将是：

输出是迄今为止我所有结果的合并。 如果我刷新我的页面并点击第二个按钮，我将得到我想要的结果：

我如何编辑我的源代码，以便表不会合并？

我的源代码如下：

单击按钮后保存值并将其传递给函数的源代码：

 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数据库显示相应的文件：

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

在此致谢谢

Answer 1

您只需将数据附加到现有表，而无需删除表中的现有行：

var row = tblUsers.insertRow(rowIndex);

在添加新行之前，应确保删除所有现有行：

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