javascript - 在表单提交上重新加载 html 表
问题描述
我有一个表单,提交时会根据用户的输入显示具有不同数据的表(对 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;
});
解决方案
您需要清理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;
});
推荐阅读
- apache - 如何拆分 htaccess 域目录
- asp.net - 下拉列表将参数传递给 vb.net 中的 webmethod
- r - 合并 DF 中的行,保留重复值之一
- java - 从 Java 中的 JSON 文件中通过索引和键获取值
- ios - 如何一次获取所有 firebase 数据子项?
- flutter - Flutter Navigator - 从页面堆栈交换页面
- c - 用C编译程序
- reactjs - 通过将道具传递给子组件来反应渲染子组件
- json - `readOnly` 属性可以成为 OpenAPI 中 PUT/POST 的一部分吗?
- javascript - 发送嵌入后删除触发器 | 不和谐.js