jquery+ajax操作控件--表格

最新推荐文章于 2025-05-30 11:28:50 发布

原创最新推荐文章于 2025-05-30 11:28:50 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jsp

html

本文介绍了一种利用Ajax技术动态加载并展示表格数据的方法。通过发送Ajax请求获取后台数据，然后在前端页面中创建表格，并填充从后台获取的数据。这种方法能够实现网页局部刷新，提高用户体验。

更多详细的资料：http://www.cnblogs.com/scy251147/archive/2010/11/30/1892411.html
http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html$
				.ajax({
					type : "post",
					url : "getShowDataList.do",
					async : true,
					//data:{data:""},这种也可以
					data : "filepath=" + checkValue,
					dataType : "json",
					error : function() {
						//alert(checkValue);
						alert('加载失败！');
					},
					success : function(json) {
						alert('加载成功！');

						var table = $("<table border=\"2\"  >");//创建表格
						table.appendTo($("#attdiv1"));//将表格添加到id=attdiv1的div里面。

				定义表格里面的行和列

							for ( var m = 0; m < json.length; m++) {
							var rticid1 = json[m].rticid;
							var rticNo1 = json[m].rticNo;
							var rticGread1 = json[m].rticGread;
							var rticNumb1 = json[m].rticNumb;
							//alert("size:   " + json.length);
							var rticSpeed1 = json[m].rticSpeed;
							var rticLength1 = json[m].rticLength;
							var stat1 = json[m].stat;
							if (m == 0) {
								//alert("0 == 0");


								rid = rticid1;
								rtmb = rticNumb1;
								stt = stat1;
								var tr1 = $("<tr></tr>");
								tr1.appendTo(table);
								var td11 = $("<td width=\"200px\" style=\"font-weight:bolder;\">"
										+ "Rticlinkid" + "</td>");
								var td1 = $("<td width=\"200px\">" + ":"
										+ "</td>");
								var td12 = $("<td width=\"200px\">" + rticid1
										+ "</td>");
								td11.appendTo(tr1);
								td1.appendTo(tr1);
								td12.appendTo(tr1);
								var tr2 = $("<tr></tr>");
								tr2.appendTo(table);
								var td21 = $("<td>" + "Rtic编号" + "</td>");
								var td2 = $("<td>" + ":" + "</td>");
								var td22 = $("<td>" + rticNo1 + "</td>");
								td21.appendTo(tr2);
								td2.appendTo(tr2);
								td22.appendTo(tr2);
								var tr3 = $("<tr></tr>");
								tr3.appendTo(table);
								var td31 = $("<td>" + "Rtic级别 " + "</td>");
								var td3 = $("<td>" + ":" + "</td>");
								var td32 = $("<td>" + rticGread1 + "</td>");
								td31.appendTo(tr3);
								td3.appendTo(tr3);
								td32.appendTo(tr3);
								var tr4 = $("<tr></tr>");
								tr4.appendTo(table);
								var td41 = $("<td>" + "分段序号 " + "</td>");
								var td4 = $("<td>" + ":" + "</td>");
								var td42 = $("<td>" + rticNumb1 + "</td>");
								td41.appendTo(tr4);
								td4.appendTo(tr4);
								td42.appendTo(tr4);
								var tr5 = $("<tr></tr>");
								tr5.appendTo(table);
								var td51 = $("<td>" + "分段速度" + "</td>");
								var td5 = $("<td>" + ":" + "</td>");
								var td52 = $("<td>" + rticSpeed1 + "</td>");
								td51.appendTo(tr5);
								td5.appendTo(tr5);
								td52.appendTo(tr5);
								var tr6 = $("<tr></tr>");
								tr6.appendTo(table);
								var td61 = $("<td>" + "分段长度" + "</td>");
								var td6 = $("<td>" + ":" + "</td>");
								var td62 = $("<td>" + rticLength1 + "</td>");
								td61.appendTo(tr6);
								td6.appendTo(tr6);
								td62.appendTo(tr6);
								var tr7 = $("<tr></tr>");
								tr7.appendTo(table);
								var td71 = $("<td>" + "分段状态" + "</td>");
								var td7 = $("<td>" + ":" + "</td>");
								var td72 = $("<td>" + stat1 + "</td>");
								td71.appendTo(tr7);
								td7.appendTo(tr7);
								td72.appendTo(tr7);


							} else {
								if (rticid1 == rid && rticNumb1 == rtmb
										&& stat1 == stt) {
									//alert("!0 == !0");
								} else {...........................

						trend.appendTo(table);
						$("#attdiv1").append("</table>");

标签

#ajax #表格 #jquery