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();
                    }


                }
            });

        });
原文地址:https://www.cnblogs.com/zjbky/p/4797620.html