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();
                    }
                }
            });
        });
ajax加载表格数据的更多相关文章
- 关于使用easyui为前端框架,加载表格数据较多时在火狐浏览器会出现表格片段不停闪烁问题的兼容问题解决。
		1.项目是可视化管理系统,加载的数据较多,使用谷歌浏览器从登陆界面跳转到主页时还算干净利落,但是使用火狐浏览器时在这一过程中在数据没有加载完毕之前,整个页面就仿佛是在闪烁,可以看到闪烁的是表格字段的片 ... 
- Go 用JSON加载表格数据
		支持热重载reload,但会有一些问题,下面注释有写 package table import ( "runtime/debug" ) //IntArray int类型数组 typ ... 
- C#曲线分析平台的制作(四,highcharts+ajax加载后台数据)
		在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ... 
- vue通过ajax加载json数据
		HTML <ul id="Hanapp"> <li class="styVue" v-for="item in actList&qu ... 
- ajax 加载不同数据
		<!doctype html> <html> <head> <meta charset="utf-8"> <title> ... 
- ztree通过ajax加载json数据中文乱码的解决方法:springmvc配置
		一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: async: { enable ... 
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
		jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ... 
- ajax验证表单元素规范正确与否   ajax展示加载数据库数据    ajax三级联动
		一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ... 
- 使用ajax()方法加载服务器数据
		使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ... 
随机推荐
- [转载]JavaScript内存分析
			https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ... 
- Java 中JOptionPane的基本使用方法
			JOptionPane 有助于方便地弹出要求用户提供值或向其发出通知的标准对话框.但是有时候看看API也特别烦,因为方法多,参数多,特别难记忆.这里我给出几种常用的方法供大家参考. (1) publi ... 
- <a>标签跳转传值。
			<a href="public_html/app/Tpl/song_1/inc/{url r="deal#support" p="id=$deal_inf ... 
- 重读C#委托、事件有感
			去年学习C#的时候按照进度把C#的委托和事件“认真”的学习了一下,自己知道委托和事件的重要性,所以也努力的学习,可说实也没怎么学懂.碰巧这段时间在做一个解析GPS数据的小项目,因为其中有需要条件自动判 ... 
- 【C语言入门教程】4.3 多维数组
			多维数组是指拥有多组小标的数组,维数的限制有具体编译器决定.多维数组的一般声明形式为: 数据类型 数组名[长度1][长度2]......[长度n]; 数组的总长度等于每组下标长度的乘积.多维数组使用连 ... 
- Mac Pro Office Word 2011 个性化设置
			操作系统:Mac Pro OS X 10.11.5 1.常用的几个操作: (1).视图 -> 功能区 (2).视图 -> 打印版式 (3).视图 -> 大纲 (4).视图 -> ... 
- Java系列笔记(4) - JVM监控与调优
			目录 参数设置收集器搭配启动内存分配监控工具和方法调优方法调优实例 光说不练假把式,学习Java GC机制的目的是为了实用,也就是为了在JVM出现问题时分析原因并解决之.通过学习,我觉得JVM ... 
- window使用qt遇到的坑
			1.window上的qt对图片的检测与识别不够完善.往往改了一个ui的背景图片,运行出来显示的却是旧的背景图片. 原因: 由于之前是项目与项目之间整合在一起,然后把ui_*_ui.h的临时文件也放在 ... 
- Ubuntu下安装php7后无法启动Apache
			报错提示:Apache is running a threaded MPM, but your PHP Module is not compiled to be threadsafe. You nee ... 
- 使用VNC登录Linux
			###服务器是否配置了VNCSERVER,可以在命令行下敲入以下命令查看: [root@localhost: ~]#rpm -qa |grep vnc ###配置VNC 1. 机器IP为:10.0.0 ... 
