Question

我正在创建动态表并将其附加到我的.php页面上的Div标签。在我的.php页面上，我有动态按钮，如果单击任何动态按钮，则将呈现具有多个标题和行的动态表（为此我编写了带有ajax请求的循环）。问题是，如果我再次单击任何动态按钮，则当前动态表数据将追加到先前的动态表中，而我想删除先前附加的表数据并呈现当前动态表数据。我试图清空div标签，但此处似乎无任何作用。希望我能有所帮助，在此先感谢。以下是我的.php和.js文件：

.php文件-我没有发布get_Btns（）的函数定义，因为它是从数据库中获取数据的基本php函数：

<?php
    function get_Btns() {
      include "config.php"; 

      $btns = $stmtDivision->fetchAll(PDO::FETCH_ASSOC);

    foreach($btns as $btn){
      echo "<input type='button' id='".$btn['divisionid']."' value='".$btn['division_name']."'
            onclick=getData('".$btn['divisionid']."')  >" ; echo "<br/>"; ?>           
    <script src="./user.js"></script> 
    <?php }
  } 
?> 
<?php include "templates/header.php"; ?> 
    <div id="buttons_panel" style="text-align:center">
      <?php echo get_Btns();?> </div>
    <div id="div" class="divClass" ></div> <br/>

.js文件：

function getData(value) {
document.getElementById("div");
var tableHtml = $('<table></table>');
var selectedManager = value;
var isEmpty = $('#div').empty();
// document.getElementById("div").innerHTML === "";
// document.getElementById("div").HTML === "";
// var isEmpty = $("#div").html() === ""; 
//$(".divclass").empty(); 
var teams = null;
$.ajax({
    url: 'data.php',
    method: 'post',
    data: 'selectedManager=' + selectedManager,
    async: false,
    success: function(data) {
        teams = JSON.parse(data);
    }
});
for (var k = 0; k < teams.length; k++) {
    const selectedteam = teams[k];
    var selectedteamid = team[k].teamid;
    var htmlth = "";
    var html = "";
    htmlth = "<tr>" + "<th id='thgrp' colspan='4' background-color: #013466;>" + teams[k].teamname + "</th>" + 
        "<th colspan='2' background-color: #62b8b6;>" + "<a href='Update.php?groupid=" + selectedteam.teamid + "' >" +
        'Update Team member' + "</a>" + "</th>" + "</tr>" +
        "<tr>" + "<th>" + "<img src='images/member.png'>" + "<b>" + "<div>" + 'Member' + "</div" + "</th>" +
        "<th>" + "<img src='images/phone.png'>" + "<b>" + "<div >" + 'Phone' + "</div" + "</th>" +
        "<th>" + "<img src='images/email.png'>" + "<b>" + "<div >" + 'Email' + "</div" + "</th>" + "</tr>";
    tableHtml.append(htmlth);
    var members = null;
    $.ajax({
        url: 'data.php',
        method: 'post',
        data: 'selectedteamid=' + selectedteamid,
        async: false,
        success: function(data) {
            members = JSON.parse(data);
            console.log(members);
        }
    });
    for (var i = 0; i < members.length; i++) {
        html += "<tr>" + "<td>" + members[i].name + "</td>" +
            "<td>" + members[i].phone + "</td>" + "<td>" + members[i].email + "</td>";
    }
    tableHtml.append(html)
}
$("#div").append(tableHtml);
value = "";

}

Answer 1

问题已解决，我尝试清空创建的动态表，而不是清空html页面上的div标签。我之前做过，但是做得不好。非常感谢大家的宝贵时间这是代码：

tableHtml.attr('id', 'tableHtmlId');
$('#tableHtmlId').empty();

动态呈现的表格的Div标签为空问题

1 个答案: