Question

我的网站上有一个脚本，每秒检查一次新的数据库条目，并将更新放入表中。

我遇到的问题是脚本正在从页面中删除表头。它们仍出现在源代码中（右键单击并显示页面源），但它们对用户不可见。

问题似乎在“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();
    });

Answer 1

您可以尝试创建下一个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>

Answer 2

HTML节点的childern不仅是TR，还包括它们之间的空格的任何部分，因此你的循环可能会删除所有TR并只留下空白的第一部分。

我建议将标题放在THEADAD和TBODY中的数据行中，然后仅在TBODY上操作，保留标题。

AJAX脚本删除表头

2 个答案: