如何更新表格而不在每次单击按钮时添加新表格？

Question

单击按钮时，我有 3 个文件用于显示数据。 当我每次单击按钮时，如何不继续添加表格？ 每次单击按钮时，我都希望获得刷新的数据。

如果按钮 id 和数据 id 相等，我曾尝试删除，但没有奏效。 有没有简单的做法？

1. 基于 HTML 的 php 脚本。
2. 用于 ajax 的 JS，用于传递按钮的 id，从 PHP 脚本获取数据。
3. PHP 从 SQL 获取数据，但我会为这篇文章写数据。

基于 HTML 的 PHP

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MINI TEST</title>
</head>

<style>
.oldList td{
    border: 1px solid gray;
    background: lightblue;
}
.oldList{
    width: 100px;
    margin: 50px;
}
.showNewData td{
    border: 1px solid gray;
    background: lightgreen;
}
.showNewData{
    width: 100px;
    margin: 50px;
}

</style>

<body>

<?php

$oldList[] = array('1' => '1', '2' => 'mango','3' => '340');
$oldList[] = array('1' => '2', '2' => 'peach', '3' => '480');

    foreach ($oldList as $value){ 
        $idForList = $value['1'];
        print "<table class='oldList'>";
        print "<tr><td>".$value['1']."</td><td>".$value['2']."</td><td>".$value['3']."</td></tr>";
        print "</table>";  

        print"<button class='newData' data-name='$idForList' id='$idForList'>{$idForList}NEW DATA</button>";  
        $idForNewData = "id" . strval($idForList);
        print "<table class='showNewData' id='$idForNewData'></table>";
    }
 
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="mini_test_ajax.js"></script>
</body>
</html>

JS

$(document).ready(function(){
  $('.newData').click(function(){
   
    var gotId =  $(this).data('name');
    var idForNewData =  "#id" + gotId; 

        $.ajax({
          url: "mini_test_sql.php",
          type: "POST",
          data: {
            "gotId": $(this).data("name")
          },
          success: function(data) {
              console.log("success");
              $.each(JSON.parse(data), function(key, value){
                $(idForNewData).append("<td>" + value + "<td>");
              });     

          },  
          error: function(xhr,XMLHttpRequest,errorThrown){
              console.log("Fail");
              console.log("xhr: " + xhr);
              console.log("XMLHttpRequest: " + XMLHttpRequest);
              console.log("errorThrown: " + errorThrown);   
          }
        });


  });
});

PHP

<?php 

$idForList = $_POST['gotId']; 

$productList[] = array();

$productList[0] = array(
    'id'    => "1",
    'name'  => "mango 2 ",
    'price' => "280"
);

$productList[1] = array(
    'id'    => "2",
    'name'  => "peach 2",
    'price' => "300"
);

if($idForList == 1){
  echo json_encode($productList[0]);
}
if($idForList ==2){
  echo json_encode($productList[1]);  
}

?>

Answer 1

很简单，当你拿到数据的时候，清空表然后再把你的数据放进去这部分代码：

$.each(JSON.parse(data), function(key, value){
       $(idForNewData).append("<td>" + value + "<td>");
}); 

应该是这样的：

$(idForNewData).html("");
var d = "<tr>";
$.each(JSON.parse(data), function(key, value){
          d += "<td>" + value + "<td>";
}); 
d += "</tr>";
$(idForNewData).html( d );

Answer 2

注意 id 选择器是 '#' 而不是 '#id'。

请尝试：

var idForNewData =  "#" + gotId;

正如 Ultrazz008 所提到的，您只是想将单元格 (td) 添加到表格中。 但是，表格包含行 (tr)，任一行包含单元格 (td)。

ID 最好以字母开头（请在此处查看）。

BR