嗨，我想显示多个表，并且表数据将通过使用 ajax 和 javascript、jquery 单击单个按钮消耗 json 数据来动态获取。对于单个表，我可以使用以下过程生成表。
$.ajax({
type: 'GET',
url: xxx.xxx.xxx.xxx,
data: "Id=" + clO + "&Location=" + clOp +"",
success: function (resp) {
var Location = resp;
var tr;
for (var i = 0; i < Location.length; i++) {
tr = tr + "<td style='height:20px' align='left'>" + Location[i].name + "</td>";
tr = tr + "<td style='height:20px' align='right'>" + Location[i].QTY + "</td>";
tr = tr + "<td style='height:20px' align='right'>" + Location[i].AMT + "</td>";
tr = tr + "</tr>";
};
document.getElementById('p_w').style.display = "block";
document.getElementById('Wise').innerHTML = "<table id='rt1' >" + "<thead ><tr><th style='height:20px'>Name</th>" + "<th style='height:20px'>Qty</th>" + "<th style='height:20px'>Amnt</th>"+ "</tr></thead>"
+ tr +
"<tr><td style='height:20px'></td></tr>" +
"</table>";
document.getElementById('Wise').childNodes[0].nodeValue = null;
},
error: function (e) {
SpinnerPlugin.activityStop();
window.plugins.toast.showLongBottom("Please Enable your Internet
SpinnerPlugin.activityStop();
}
});
但是要使用ajax单击一次生成多个表，我们如何生成，我想生成以下格式的多个表
table, th, td {
border: 1px solid black;
}<body>
<p> Table 1</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p> Table 2</p>
<table style="width:100%">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Science</td>
<td>70</td>
</tr>
<tr>
<td>Computers</td>
<td>80</td>
</tr>
<tr>
<td>Art</td>
<td>70</td>
</tr>
</table>
<p>Table 3</p>
<table style="width:100%">
<tr>
<th>Laptop</th>
<th>Price</th>
</tr>
<tr>
<td>Dell</td>
<td>$350</td>
</tr>
<tr>
<td>Lenovo</td>
<td>$450</td>
</tr>
<tr>
<td>Asus</td>
<td>$200</td>
</tr>
</table>
</body>最佳答案
/* Sample response expected as Ajax */
var data = {
Student: [{
name: 'abc',
age: '20'
}, {
name: 'xyz',
age: '30'
}],
MarkList: [{
subject: 'English',
mark: '50'
}, {
subject: 'Arabic',
mark: '75'
}],
Products: [{
company: "Dell",
Amount: '50'
}, {
company: "HP",
Amount: '100'
}]
};
/* Called on Ajax success */
fnAjaxSuccess(data);
function fnAjaxSuccess(data) {
document.getElementById('main').innerHTML = '';
FillStudentList(data.Student, 1);
FillMarkList(data.MarkList, 2)
FillProductList(data.Products, 3);
}
/* Creating 1st table */
function FillStudentList(Student, tableIndex) {
var html = "<p> Table " + tableIndex + "</p><table>";
for (var i = 0; i < Student.length; i++) {
html += "<tr><td>" + Student[i].name + "</td><td>" + Student[i].age + "</td></tr>"
}
document.getElementById('main').innerHTML += (html + "</table>");
}
/* Creating 2nd table */
function FillMarkList(MarkList, tableIndex) {
var html = "<p> Table " + tableIndex + "</p><table>";
for (var i = 0; i < MarkList.length; i++) {
html += "<tr><td>" + MarkList[i].subject + "</td><td>" + MarkList[i].mark + "</td></tr>"
}
document.getElementById('main').innerHTML += (html + "</table>");
}
/* Creating 3rd table */
function FillProductList(Products, tableIndex) {
var html = "<p> Table " + tableIndex + "</p><table>";
for (var i = 0; i < Products.length; i++) {
html += "<tr><td>" + Products[i].company + "</td><td>" + Products[i].Amount + "</td></tr>"
}
document.getElementById('main').innerHTML += (html + "</table>");
}table, th, td {
border: 1px solid black;
}<div id='main'></div>这里假设，您的 ajax 响应将有足够的数据来填充 3 个表。
您可以将其写为
$(document).on('click', '#id-of-button', function(){
$.ajax({
type: 'GET',
url: xxx.xxx.xxx.xxx,
data: "Id=" + clO + "&Location=" + clOp +"",
success: function (resp) {
fnAjaxSuccess(resp);
},
error: function (e) {
SpinnerPlugin.activityStop();
window.plugins.toast.showLongBottom("Please Enable your Internet
SpinnerPlugin.activityStop();
}
});
});
关于javascript - 如何使用ajax一键点击动态显示多个表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45753015/