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 ...
随机推荐
- linux下查找包含BOM头的文件和清除BOM头命令
查找包含BOM头的文件,命令如下: grep -r -I -l $'^\xEF\xBB\xBF' ./ 这条命令会查找当前目录及子目录下所有包含BOM头的文件,并把文件名在屏幕上输出. 但 ...
- ajax浅析---ScriptManager
使用ScriptManager控件 它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service,所有需要支持ASP.NET AJAX ...
- 分享一个c#t的网页抓取类
using System; using System.Collections.Generic; using System.Web; using System.Text; using System.Ne ...
- CSS DIV HOVER
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- HDU 5651 计算回文串个数问题(有重复的全排列、乘法逆元、费马小定理)
原题: http://acm.hdu.edu.cn/showproblem.php?pid=5651 很容易看出来的是,如果一个字符串中,多于一个字母出现奇数次,则该字符串无法形成回文串,因为不能删减 ...
- 雪峰配置的nginx
- 利用LruCache为GridView异步加载大量网络图片完整示例
MainActivity如下: package cc.testlrucache; import android.os.Bundle; import android.widget.GridView; i ...
- The report for triangle problem
本次实验主要使用eclipse 编写三角形判定的代码,并用junit进行测试. 1.安装junit和hamcrest 下载junit-4.12.jar和hamcrest-all-1.3.jar 并且拖 ...
- iOS开发——UI基础-KVC
除了一般的赋值和取值的方法,我们还可以用Key-Value-Coding(KVC)键值编码来访问你要存取的类的属性. 如何使用KVC存取对象属性呢?看个示例 一.使用KVC存数据 定义一个person ...
- Fedora 25 Alpha版本今天发布啦
时隔Fedora 24发布后的3个月,Fedora项目团队非常开心的宣布任何感兴趣的用户都能下载和测试即将到来的Fedora 25操作系统的Alpha预发布版本,在Fedora 25 Alpha里程碑 ...