一、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. 完全迁移到red hat来的相关问题解决和配置

    默认从光盘iso镜像安装iso-1 时, yum.repos.d只有 packagekit-media.repo, 要从网上下载一个 CentOS-Base.repo文件放到这里. redhat上下载 ...

  2. UnicodeDecodeError: 'utf8' codec can't decode

    数据库存了些中文字符, 比如'处理脚本'这样的汉字, 结果导致一个python程序报错. 下面记录处理过程和相关结论. ===========================dal.py 程序片段,p ...

  3. 《JavaScript DOM 编程艺术(第2版)》读书笔记

    阅读了本书第五章关于使用JavaScript的最佳实践,大部分的建议之前都有耳闻,不过阅读之后有更深的体会. 1.防止滥用JavaScript “不管你想通过JavaScript改变哪个网页的行为,都 ...

  4. 数论只会GCD。。。

    一些关于GCD的代码.... #include <iostream> #include <cstdio> #include <cstring> using name ...

  5. 联不上网 Unable to initialize Windows Sockets interface. General failure.

    电脑莫名联不上网 Unable to initialize Windows Sockets interface. General failure. Unable to initialize the W ...

  6. [COJ0985]WZJ的数据结构(负十五)

    [COJ0985]WZJ的数据结构(负十五) 试题描述 CHX有一个问题想问问大家.给你一个长度为N的数列A,请你找到两个位置L,R,使得A[L].A[L+1].…….A[R]中没有重复的数,输出R- ...

  7. STM32F103ZET6 用定时器级联方式输出特定数目的PWM(转载)

    STM32F103ZET6里共有8个定时器,其中高级定时器有TIM1-TIM5.TIM8,共6个.这里需要使用定时器的级联功能,ST的RM0008 REV12的P388和P399页上有说明对于特定的定 ...

  8. explicit,violate,volatile,mutable小结

    转自:http://blog.csdn.net/helonsy/article/details/7091130 explicit:放在构造函数前面可以阻止构造函数的隐式类型转换.这样可以避免不必要的错 ...

  9. windows 下安装 mysql

    1.根据系统,选择下载mysql community server(32/64) 版本 2.解压下载的文件 3.配置环境变量 将mysql目录下的bin目录路径配置到环境变量Path中,如下图所示 4 ...

  10. HDU 1003 动态规划

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 这几天开始刷动归题目,先来一道签到题 然而做的并不轻松, 没有注意到边界问题, WA了几发才发现 #inc ...