zoukankan      html  css  js  c++  java
  • 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();
                        }
    
    
                    }
                });
    
            });
  • 相关阅读:
    简单 || 复杂
    命令行参数 && json 协议 && 自定义 error 类型
    Circos安装 (转+总结)
    ggplot2—Pathway富集分析气泡图
    ggplot2绘图
    linux常用命令小结
    生信学习网站
    Perl学习建议(转)
    R作图函数(转)
    Android viewPager+fragment实现滑页效果
  • 原文地址:https://www.cnblogs.com/zjbky/p/4797620.html
Copyright © 2011-2022 走看看