在表單提交時重新加載html表

Question

我有一個表單，提交時會根據用戶的輸入顯示具有不同數據的表（對php文件的ajax請求）。 我有沒有辦法在用戶每次提交表單時用新信息動態地重新加載表格？ 截至目前，數據在每次提交后一直追加到表中，並繼續添加到最后一次提交的數據上。 任何建議將不勝感激，謝謝！

HTML

<form id = "infoForm" 
action="file.php" method="post">
    <b>Enter info:</b> <input type = "text" name = "info" 
id = "infoInput" maxlength = "10" required >
     <button type = "submit" id = "submit_form">Submit</button>
 </form>
 <table id = "infoTable">
     <tbody>
         <tr>
             <th>Name</th>
             <th>Number</th>
         </tr>
     </tbody>
 </table>

JavaScript的

$("#infoForm").submit(function() { 
    $("#infoTable").fadeIn(400);

    //InputData is an array that contains the user input data
    $.post( "file.php", InputData,
        function( data ){

            var names = data.names; //from PHP file
            var numbers = data.numbers; //from PHP file


            var namesArray = names.split(',');
            var numbersArray = numbers.split(',');
            for(var i = 0; i < namesArray.length; i++) {
              $("#infoTable > tbody").append('<tr><td>'+namesArray[i]+'</td><td>'+numbersArray[i]+'</td></tr>');
          }


    }, "json");
    return false;

});

Answer 1

您需要清潔tbody然后附加新記錄。

嘗試這個：

$("#infoForm").submit(function() { 
    $("#infoTable").fadeIn(400);

    //InputData is an array that contains the user input data
    $.post( "file.php", InputData,
        function( data ){

            var names = data.names; //from PHP file
            var numbers = data.numbers; //from PHP file


            var namesArray = names.split(',');
            var numbersArray = numbers.split(',');
            $("#infoTable > tbody").empty(); // clean the tbody before adding new data
            for(var i = 0; i < namesArray.length; i++) {
              $("#infoTable > tbody").append('<tr><td>'+namesArray[i]+'</td><td>'+numbersArray[i]+'</td></tr>');
          }


    }, "json");
    return false;

});