`
Franciswmf
  • 浏览: 800223 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

ajax动态生成table

 
阅读更多
	$(function(){
		ajaxT();
	});
	function ajaxT(){ 
	    $.ajax({ 
	         type:"POST", 
	         dataType: "json", 
	         url:"<%=basePath%>UserInfoServlet", 
	         data:"doaction=userList", 
	         success:function(data){ 
	         createShowingTable(data);
	}
	} 
	); 
	}
	//动态的创建一个table
	function createShowingTable(data) {
		var tableStr = "<table class='tab-list' width='99%'>";
		tableStr = tableStr
				+ "<tr class='list-header'>"
				+"<td width='5%'>序号</td>"
				+"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
				+"<td width='30%'>用户姓名</td>"
				+"<td width='20%'>工号</td>"
				+"<td width='20%'>职位</td>"
				+"<td width='20%'>创建时间</td>"
				+"</tr>";
		var len = data.length;
		for ( var i = 0; i < len; i++) {
			tableStr = tableStr + "<tr>"
					+"<td>"+ (i+1) + "</td>" 
					+"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data[i].key+"' /></td>"
					+"<td>"+ data[i].realName + "</td>"
					+ "<td>"+ data[i].userNo + "</td>"
					+ "<td>"+ data[i].position + "</td>"
					+"<td>"+data[i].regTime+"</td>"
					+"</tr>";
		}
		if(len==0){
			tableStr = tableStr + "<tr style='text-align: center'>"
			+"<td colspan='6'><font color='#cd0a0a'>"+ 暂无记录 + "</font></td>"
			+"</tr>";
		}
		tableStr = tableStr + "</table>";
		//添加到div中
		$("#tableAjax").html(tableStr);
	}
分享到:
评论

相关推荐

    使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏

    在本例中,我们的目标是动态生成一个table表格。首先,HTML中需要有一个表格结构,但初始时不包含任何数据。我们使用jQuery选择器获取这个表格,并在AJAX请求成功后,将服务器返回的数据插入到表格中。假设服务器...

    JQuery Ajax动态生成Table表格

    实现过程是这样的:前台通过jquery的ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里。感兴趣的朋友一起看看吧

    jQuery ajax动态生成table功能示例

    本文实例讲述了jQuery ajax动态生成table的方法。分享给大家供大家参考,具体如下: $(function(){ ajaxT(); }); function ajaxT(){ $.ajax({ type:"POST", dataType: "json", url:"&lt;&#37;=basePath%&gt;...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    ajax实现jsp页面表格

    在本案例中,“ajax实现jsp页面表格”是一个教学示例,它展示了如何利用AJAX技术动态地从数据库获取数据,并在JSP页面的表格中展示,而无需用户感知到页面刷新。 首先,我们来理解一下JSP(JavaServer Pages)。JSP...

    jQuery+ajax实现动态添加表格tr td功能示例

    ### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时,我们经常需要动态地从服务器获取数据,并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...

    JQ json动态生成table

    当我们需要从后台获取数据并动态地展示在前端表格(table)上时,jQuery和JSON的结合就显得尤为重要。本篇文章将深入探讨如何使用jQuery从后台获取JSON数据,并动态生成HTML表格。 首先,理解JSON数据结构至关重要...

    ajax动态分页的demo

    **Ajax 动态分页详解** 在Web应用中,数据量大时,一次性加载所有内容会导致页面加载缓慢,用户体验下降。为了解决这个问题,我们通常采用分页技术,而Ajax分页则是其中一种高效且用户体验良好的实现方式。本文将...

    动态添加Table表格

    动态添加Table表格可以提供灵活的数据展示方式,适应不同场景和数据量的变化。本示例将详细介绍如何在ASP.NET后台使用C#语言来实现动态添加表格的功能。 首先,我们需要了解动态创建表格的基本步骤: 1. **创建...

    jQuery实现动态给table赋值的方法示例

    这个技巧不仅适用于填充表格,还可以应用于其他需要动态生成或更新DOM内容的场景。结合jQuery的相关专题学习,如jQuery表格操作、JSON数据处理、表单操作等,可以进一步提升开发效率和代码质量。

    读取json数据动态生成table

    在JavaScript(JS)开发中,动态地从JSON(JavaScript Object Notation)数据中读取信息并将其呈现到HTML表格(table)中是一项常见的任务。JSON因其简洁、易读且易于处理的特性,常用于存储和交换结构化数据。在这...

    JQuery 动态生成Table表格实例代码

    JQuery 动态生成Table表格实例代码中主要涉及的知识点包括JQuery的基本使用、动态创建DOM元素、DOM操作方法以及事件处理。JQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...

    js实现table分页可以动态生成table

    总结一下,实现JavaScript动态分页表格的关键步骤包括: 1. 创建HTML结构,包括表格和分页导航。 2. 在JavaScript中处理数据分页逻辑,包括计算总页数、显示指定页数据和处理分页按钮事件。 3. 获取数据,可能是从...

    动态生成表格(ASP)

    在ASP.NET中,动态生成表格主要涉及到HTML表格元素(`&lt;table&gt;`)、服务器控件(如`GridView`或`DataGrid`)以及数据绑定的概念。下面我们将深入探讨这些知识点: 1. **HTML表格**:`&lt;table&gt;`标签用于创建HTML表格,...

    js动态生成表格

    可以使用AJAX(异步JavaScript和XML,现在通常指XMLHttpRequest)获取数据,然后动态生成表格。 - 考虑到现代前端框架,如React、Vue或Angular,它们提供了更高效的数据绑定和渲染机制。 6. 源码示例: ```...

    JS实现动态生成html table表格的方法分析

    为了更好地掌握JavaScript动态生成表格的技巧,建议参考相关的专题内容,如《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》等,这些专题能够帮助开发者更...

    JS实现动态生成表格并提交表格数据向后端

    动态生成表格的核心在于编写一个JS函数,如`addTable()`。在这个函数中,我们将创建新的表格行(tr)并插入到表格中。每个新行都包含一组输入字段(`&lt;input&gt;`),用于用户输入数据。同时,每个输入字段都有唯一的ID...

Global site tag (gtag.js) - Google Analytics