一、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. Netbeans 设置模板

    /** * @Description * @author ${user} * @date ${date} ${time} * @copyright ${copyright} */ 工具-->模板 ...

  2. 关于shell脚本时遇value too great for base (error token is "08")

    今天在书写一个定时cp脚本时遇到了一个问题,value too great for base (error token is "08") 在网上查看到原来是以0开头的数字 系统会默 ...

  3. dubbo框架----初探索-配置

    使用框架版本 dubbo-2.5.3 spring-4.2.1.RELEASE jdk-1.8 tomcat-8.0 zookeeper-3.3.6 Dubbo与Zookeeper.SpringMVC ...

  4. 【转载】android中.9png

    在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”.这种图片是用于Android开发的一种特殊的图片格式,它的 ...

  5. 淘宝首页源码藏美女彩蛋(下)(UED新作2013egg)

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

  6. VBA 每日文件按日期打包存放

    每天省出1小时,换个好心情 1.判断是否存在tempfolder (过渡文件夹) 2.不存在 则在目标目录下新建文件夹tempfolder 在网上看到一种更简单的方法 if dir("e:\ ...

  7. oracle数据表创建分区与查询

    场景: 遇到1亿数据量的数据需要根据用户名做些数据统计分析,想直接做些聚合计算基本没可能,于是打算先根据日期按照年月创建分区,然后对各个分区分别进行统计,最后汇总结果. 有两种方法,分别是手工设置分区 ...

  8. Javascript高级程序设计——BOM(浏览器对象模型)

    BOM(浏览器对象模型),它提供了独立于内容而与浏览器窗口进行交互的对象.BOM由一系列相关的对象构成.一.window对象      window对象表示整个浏览器窗口,但不必表示其中包含的内容.W ...

  9. Javascript高级程序设计——面向对象之创建对象

    对象创建方法: 工厂方法 构造函数模式 原型模式 组合构造函数和原型模式 寄生构造函数模式 问题构造函数模式 工厂模式: function Person(name, age){ var obj = n ...

  10. iTool拷贝app到电脑上

    iTool拷贝app到电脑上 方法一. iTool找到你的app, 归档在桌面, 桌面就生成了ipa, 其实ipa是一个压缩包, 使用解压软件解压之后 生成Payload文件夹, 点开就可以看到Clo ...