ajax加载表格数据
一、html代码
<style type="text/css">
.table-taskinfo table tr {
border-top: 2px solid #95B8E7;
}
.table-taskinfo td {
border-top: 1px solid #95B8E7;
border-bottom: 1px solid #95B8E7;
border-left: 1px solid #95B8E7;
border-right: 1px solid #95B8E7;
height: 25px;
}
.alignleft {
margin-left: 5px;
}
.alignright {
margin-right: 5px;
}
</style>
<div id="samplInfoList">
<table id="tbsamplInfoList" class="table-taskinfo" width="600" cellpadding="0" cellspacing="0"> <thead> <tr style="text-align: center"> <td>任务名称</td> <td>监测点位</td> <td>监测类别</td> <td>组长</td> <td>组员</td> <td>开始时间 </td> <td>车辆号</td> <td>备注</td> </tr> </thead> <tbody> <tr id="trtemplate" style="text-align: center; "> <td id="taskname"></td> <td id="testpoint"></td> <td id="testclass"></td> <td id="testleader"></td> <td id="testperson"></td> <td id="teststarttime"> </td> <td id="carnum"></td> <td id="remark"></td> </tr> </tbody> </table>
</div>
二、javas代码
$(function () { $("#samplInfoList").css("display", "none"); $.ajax({ url: "/Project/ProjectTaskAllocation/QuerySamplList", //url:"/Project/ProjectTask/Query?StatusValue=0", data: { TaskId: $("#taskid").val() }, type: "POST", success: function (result) { debugger; var tr = $("#trtemplate"); var temp = $.parseJSON(result); if (temp.rows.length > 0) { $("#samplInfoList").css("display", ""); $.each(temp.rows, function (index, item) { var items = tr.clone(); var _index = index; items.children("td").each(function (innerindex) { switch (innerindex) { case 0: $(this).html(item.TaskName); break; case 1: $(this).html(item.MonitorPlaceName); break; case 2: $(this).html(item.MonitorTypeCName); break;; case 3: $(this).html(item.MonitorLeader); break; case 4: $(this).html(item.MonitorUser); break; case 5: $(this).html(item.StartTime); break; case 6: $(this).html(item.CarNum); break; case 7: $(this).html(item.Remark); break; } }); items.insertAfter(tr); }); $("#trtemplate").hide(); } } }); });