一、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加载表格数据的更多相关文章

  1. 关于使用easyui为前端框架,加载表格数据较多时在火狐浏览器会出现表格片段不停闪烁问题的兼容问题解决。

    1.项目是可视化管理系统,加载的数据较多,使用谷歌浏览器从登陆界面跳转到主页时还算干净利落,但是使用火狐浏览器时在这一过程中在数据没有加载完毕之前,整个页面就仿佛是在闪烁,可以看到闪烁的是表格字段的片 ...

  2. Go 用JSON加载表格数据

    支持热重载reload,但会有一些问题,下面注释有写 package table import ( "runtime/debug" ) //IntArray int类型数组 typ ...

  3. C#曲线分析平台的制作(四,highcharts+ajax加载后台数据)

    在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...

  4. vue通过ajax加载json数据

    HTML <ul id="Hanapp"> <li class="styVue" v-for="item in actList&qu ...

  5. ajax 加载不同数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. ztree通过ajax加载json数据中文乱码的解决方法:springmvc配置

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: async: { enable ...

  7. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  8. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  9. 使用ajax()方法加载服务器数据

    使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...

随机推荐

  1. linux安装软件通常会做哪些事

    一般来说,安装某个包,某个服务,某个软件时,可能会做以下事情(不一定全部) - 在安装目录: /usr/bin, /usr/lib: /usr/you_specified_bin/, /usr/you ...

  2. PostgreSQL中的时间操作总结

    取当前日期的函数: (1)       取当前时间:select now() (2)       取当前时间的日期: select current_date (3)       取当前具体时间(不含日 ...

  3. 连接到kali linux服务器上的MySQL服务器错误

    前言:想把数据库什么的都放在虚拟机kali Linux里,但无奈出了好多错误. 首先:可以参照上一篇文章开启kali服务器端的远程连接功能,上一篇文章 然后:使用window端的sqlyog(MySQ ...

  4. 【翻译】Tomcat 6.0 部署与发布

    本篇参考Tomcat官方文档:<First Webapp>翻译,并结合自己的开发经验介绍关于tomcat部署以及发布的相关内容. 1 目录结构 在tomcat中所有的应用都是放置在CATA ...

  5. github及其他记录

    http://mvnrepository.com/artifact/org.jdom/jdom/1.1.3 https://github.com/open-power-workgroup/Hospit ...

  6. 微信公众平台中添加qq在线聊天代码

    微信公众平台是个不错的媒体,可以和你的小伙伴们即时交流,但你的小伙伴们是用手机上的微信,打字自然就慢了:有人说用微信网页版,那个也不习惯,再说也不一定所有人都知道网页版微信.(2014.01.22更新 ...

  7. CF #305(Div.2) D. Mike and Feet(数学推导)

    D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  8. git之常用指令

    参考:Git教程 - 廖雪峰的官方网站 1.git  //linux上检测是否安装git 2.sudo apt-get install git //linux上安装git 3.git config - ...

  9. ckeditor、ckeditor配置--整合

    1.将ckeditor和ckfinder文件夹拷入项目文件夹中,刷新项目. 2.ckfinder把文件夹中的bin目录下的dll文件(CKFinder.dll)添加到网站的引用中,防止出现找不到类的错 ...

  10. Android开发App工程结构搭建

    本文算是一篇漫谈,谈一谈关于android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角 ...