一、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. Java 中JOptionPane的基本使用方法

    JOptionPane 有助于方便地弹出要求用户提供值或向其发出通知的标准对话框.但是有时候看看API也特别烦,因为方法多,参数多,特别难记忆.这里我给出几种常用的方法供大家参考. (1) publi ...

  2. Android中实现圆角矩形及半透明效果。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...

  3. cf558c(bfs)

    C. Amr and Chemistry time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. 资源URL地址记录

    1. 如何搭建VPN服务器 http://www.360doc.com/content/11/0217/11/3084932_93749130.shtml http://www.softxp.net/ ...

  5. Javascript正则表达式匹配替换

    根据正则表达式的匹配结果将匹配项替换为*function regReplace(reg, str){ var result, //最终输出结果 out, //每次运行正则exec返回的匹配结果. in ...

  6. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  7. [codevs1141]数列

    [codevs1141]数列 试题描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12 ...

  8. OSI参考模型与TCP/IP协议模型

    OSI和TCP/IP都是为了计算机之间更好的互联的. 计算机网络是一个复杂的系统,比如两台计算机进行通信不仅仅只是有一条通信线就可以了. 还有很多的工作需要完成,例如: 如何知道对方计算机是否做好准备 ...

  9. 关于在android 4.2.2 上运行runlmbench

    在剑锋的基础上加一些自己笔记,让自己更懂一些这个流程. 参考:http://www.cnblogs.com/zengjfgit/p/5731655.html runlmbench 是一款在linux ...

  10. Spring官网jar包下载方法

    Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包,但是完全没想到中国的国情,在伟大的墙内,直接通过ma ...