使用Ajax从多个自定义表格中获取数据的方法如下:
$(document).ready(function() {
// 定义一个数组来存储获取到的数据
var data = [];
// 发送Ajax请求获取数据
$.ajax({
url: 'your_data_source_url', // 替换为你的数据源URL
type: 'GET',
dataType: 'json',
success: function(response) {
data = response; // 将获取到的数据存储到数组中
// 调用函数来填充表格数据
populateTables();
},
error: function(xhr, status, error) {
console.log(error); // 打印错误信息
}
});
// 填充表格数据的函数
function populateTables() {
// 遍历每个表格
$('table').each(function() {
var tableId = $(this).attr('id'); // 获取当前表格的ID
var tableData = data[tableId]; // 根据表格ID获取对应的数据
// 遍历数据并创建表格行
$.each(tableData, function(index, item) {
var row = $('<tr></tr>');
// 遍历数据项并创建表格单元格
$.each(item, function(key, value) {
var cell = $('<td></td>').text(value);
row.append(cell);
});
// 将行添加到表格中
$('#' + tableId).append(row);
});
});
}
});
your_data_source_url
为实际的数据源URL,该URL应返回一个JSON格式的数据。<table id="table1">
<!-- 表格内容 -->
</table>
<table id="table2">
<!-- 表格内容 -->
</table>
通过以上步骤,你可以使用Ajax从多个自定义表格中获取数据,并将数据填充到相应的表格中。请注意,这只是一个基本的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云