AJAX腳本刪除表頭

我在我的網站上有一個腳本，每秒都會檢查新的數據庫條目，並將更新放入表格中。AJAX腳本刪除表頭

我遇到了腳本從頁面中刪除表頭的問題。它們仍然出現在源代碼中（右鍵單擊並顯示頁面源代碼），但它們對用戶不可見。

這個問題似乎在「while (tbl.lastChild != tbl.firstChild) { tbl.removeChild(tbl.lastChild); }」之內，但是如果我刪除了這行代碼，腳本會一直重複顯示相同的數據。例如，如果我在數據庫中有名稱1，名稱2和名稱3。所有三個都將顯示，然後重複。

如何在停止重複數據的同時顯示錶格標題？

我完整的腳本代碼是：

function tick() { 
      var xhttp = new XMLHttpRequest(); 

      xhttp.onload = (function() { 
        var data = JSON.parse(xhttp.responseText); 
        var tbl = document.getElementById("reports"); 
        while (tbl.lastChild != tbl.firstChild) { tbl.removeChild(tbl.lastChild); } 

        function cell(data) { 
          var c = document.createElement("td"); 

          c.appendChild(document.createTextNode(data)); 

          return c; 
        } 


        for (var i = 0; i < data.length; i++) { 
          var row = document.createElement("tr"); 

          row.appendChild(cell(data[i]["id"])); 
          row.appendChild(cell(data[i]["firstname"])); 
          row.appendChild(cell(data[i]["lastname"])); 
          row.appendChild(cell(data[i]["date"])); 

          var a = document.createElement("a"); 
          var c = document.createElement("td"); 

          a.href = "view.php?id=" + data[i]["id"]; 
          a.appendChild(document.createTextNode("View ID")); 

          c.appendChild(a); 
          row.appendChild(c); 

          tbl.appendChild(row); 

          setTimeout(tick, 1000); 
        } 
      }); 

      xhttp.open("GET", "reportload.php", true); 
      xhttp.send(""); 


    } 
    addEventListener("DOMContentLoaded", function() { 
      tick(); 
    });

來源

2014-03-05 Tim

我猜你沒有使用''爲表格標題，''主表的內容和''爲桌腳？ –

您可以嘗試創建下一個HTML表格並使用它：

<table> 
    <thead> 
     <tr> 
     <th>title1</th> 
     <th>title1</th> 
     </tr> 
    </thead> 
    <tbody id="reports"> 
     <tr> 
     <td>value</td> 
     <td>value</td> 
     </tr> 
    </tbody> 
</table>

來源

2014-03-05 07:35:18

的HTML節點的子女不僅是紅素，而且它們之間的空格的任何部分，所以你的循環可能會刪除所有的TR，只保留了第一部分的空格。

我會建議將標題放在THEAD和TBODY中的數據行中，然後僅對TBODY進行操作，使標題保持不變。

來源

2014-03-05 07:31:19

AJAX腳本刪除表頭

回答

相關問題