页面如何动态显示多个table数据
<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)语句最后加载时只显示一组数据,但如果不写该行代码则数据无法展示。该如何操作?感谢大神