页面如何动态显示多个table数据

学无止境啊~ 2020-02-10 01:51:05
<table border="0" cellpadding="0" cellspacing="0" class="form2" id="ItemsTable">
<tbody></tbody>
</table>

<script type="text/javascript">
var Id = '@ViewBag.Id';

//标题行
var titleHtml = '<table border="0" cellpadding="0" cellspacing="0" class="form2" id="ItemsTable{id}"><thead><tr name="itemsName" class="content"><td colspan="5" style="border-style:none;font-size:24px;font-weight:bold;" align="center"><input type="hidden" class="Id" name="Id" value="{Id}">{Name}测试<input type="hidden" class="valueId" name="valueId" value="{valueId}"></td><td field="IsValid" style="border-style:none;font-size:24px;font-weight:bold;width:30px;"><input name="IsValid" type="checkbox" value="false"></td></tr><tr><td width="120" class="tdcolumn">时间</td><td width="120" class="tdcolumn">重量<br>{unitzl}</td><td width="80" class="tdcolumn">长度<br>{unitcd}</td><td width="80" class="tdcolumn"><input type="radio" name="rdType" disabled="disabled" />上次<br /><input type="radio" name="rdType" disabled="disabled" />本次<br /></td><td width="80" class="tdcolumn">备注</td><td width="80" class="tdcolumn">其他</td></tr></thead><tbody></tbody></table>';
//数据行
var trHtml = '<tr name="trItems" class="content"><td><input type="hidden" name="dtbTime" value="{Time}">{dtbTime}</td><td>{zlValue}</td><td>{clValue}</td></tr>';


$(function () {
GetData(); //页面加载时显示
});

function GetData() {
$("#ItemsTable tbody").empty();
//加载标题数据
$.post("@Url.Action("TitleList")", { Id: Id }, function (data) {
if (data.length > 0) {
$(data).each(function (index, row) {
var entity = data[index];
var tithtml = titleHtml;
tithtml = tithtml.replace("{id}", entity.Id);
//...
//...依次赋值
//加载该标题下行数据
GetValueData(entity);

$("#ItemsTable tbody:last").append(tithtml); //如何能够准确显示该有的数据
});
}
}, "json");
}
function GetValueData(entity) {
$.post("@Url.Action("ValueList")", { Id: entity.Id }, function (data) {
debugger;
if (data.length > 0) {
$("#ItemsTable" + entity.Id + " tbody").empty();
$(data).each(function (index, row) {
debugger;
var html = trItemsHtml;
html = html.replace("{Time}", data[index].Time);
//...
//...依次赋值

$("#ItemsTable" + entity.Id + " tbody:last").append(html);
});
}
}, "json");
}
</script>
页面中会显示带有标题的数据组,一组数据是两行,一组数据是三行,加入:$("#ItemsTable tbody:last").append(tithtml)语句最后加载时只显示一组数据,但如果不写该行代码则数据无法展示。该如何操作?感谢大神
...全文
129 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧