我有2个HTML表格。我正在尝试根据第一个表中按下的链接更改第二个表的内容。
以下是填充第一个表格的代码:
$.each(tableResults, function () {
$('#table1 tbody:last-child').append('<td>' + this + '</td>');
});
以下是填充第二个表格的代码:
$(document).ready(function () {
var tableName = 'databaseTable1';
$.ajax({
url: 'http://localhost/api/Dynamic?table=' + tableName,
dataType: 'Json',
success: function (tableResults) {
$.each(tableResults, function (index, value) {
if ($('#table2 th:last-child').length === 0) {
$('#table2 thead').append('<th>' + value + '</th>');
} else {
$('#table2 th:last-child').after('<th>' + value + '</th>');
}
});
}
});
});
如您所见,表格是动态填充的。我需要知道如何将第一个表中的每个值转换为将变量tableName
更改为所选值的链接。
然后,页面应刷新并显示所选表格中的数据。如果它有助于我的程序有F#
后端。
另外在旁注中,是否有人知道如何将tableNames
默认值设置为table1
中的第一个值。
任何帮助都将不胜感激。
答案 0 :(得分:1)
您可以将tableName
存储在触发元素的属性中(例如a
)。然后,当用户点击此触发器时,使用.attr()
从属性中获取tableName
。
我不知道你的反应,所以在我的例子中有一个假的。
(点击任意一行,查看日志中的tableName
。
var tableResults = [
{
name: 'dynamicTable1'
},
{
name: 'dynamicTable2'
}
];
$.each(tableResults, function () {
$('#table1 tbody:last-child').append('<tr><td><a data-table="' + this.name + '">' + this.name + '</a></td></tr>');
});
$(document).on('click','[data-table]', function(){
var link = $(this),
tableName = link.attr('data-table');
console.log(tableName);
// do your ajax call with tableName
// $.ajax({ ....
});
&#13;
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table id="table1">
<tbody></tbody>
</table>
<hr />
<table id="table2">
<tbody></tbody>
</table>
&#13;
http://jsbin.com/jicihohama/edit?html,js,console,output
备注:强>
然后页面应刷新并显示数据
刷新你的意思是ajax&#34;刷新&#34;?否则你为什么需要一个ajax?
您无法将td
放入tbody
,因此您还需要添加一行(tr
)。