jquery动态生成表格的问题，数据是从后台过来的，求大神_百度知道
jquery动态生成表格的问题，数据是从后台过来的，求大神
我需要显示rcs.name，每行显示十六个，求大神$.getJSON(&countrys/Country_getCountryResult.action&,{countryclassId:countryclassId},function(data){
data=eval(data);
$.each(data,function(index,rcs){
if(index&16){
$(&&td&&/td&&).appendTo(&div[id=country] tr&);
$(&&td&&a href='countryClass/Country_getCountryContentById?countryId=&+rcs.id+&&countryname=&+rcs.name+&'&&+rcs.name+&(& +rcs.totalNum+&)&/a&&/td& &).appendTo(&div[id=country] tr&);
$(&&td&&a href='countryClass/Country_getCountryContentById?countryId=&+rcs.id+&&countryname=&+rcs.name+&'&&+rcs.name+&(& +rcs.totalNum+&)&/a&&/td& &).appendTo(&div[id=country] tr&);
});我需要显示rcs.name，每行显示十六个，求大神
我有更好的答案
你的代码，看得我头疼。
其他类似问题
为您推荐：
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁使用jQuery和JSON动态添加表格_Linux编程_Linux公社-Linux系统门户网站
你好，游客
使用jQuery和JSON动态添加表格
来源：Linux社区&
作者：chenwill3
jQuery相信大家都有使用过，这个库对于程序的开发很有用，有时我们会把jQuery和xml结合起来，通过xml交换数据。实际应用中我们也可以使用JSON这种数据格式来进行数据的交换。要使用JSON就要先下载下面这6个开发包。为了防止出错这几个jar包也把他们放在tomcat的lib目录下面。这几个包在csdn上都可以找到，大家自己去下载就OK了。
如下图所示；
下载好之后拷贝在lib下面就可以了，如果有需要就放在构建路径下面。之后就可以开始操作了，这里会使用到servlet和jQuery交互。现在来写一下jsp页面，代码如下所示
&version="1.0"&encoding="UTF-8"&&&
%@&page&language="java"&contentType="text/&charset=UTF-8"&&
&&&&pageEncoding="UTF-8"%&&
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&
&xmlns="http://www.w3.org/1999/xhtml"&&
&type="text/javascript"&src="jquery.js"&&
&type="text/javascript"&&
$(document).ready(function(){&&
&&&&&&$("#tijiao").click(function(){&&
&&&&&&&&&&&&&&$.get("MyServlet",&&
&&&&&&&&&&&&&&&&&&{username:'chenruiyin'},&&&
&&&&&function(data,statusText){//相应函数&&&&
&&&&&&&&&&&var&jsonvars=data.//返回JSON数据&&&&
&&&&&&for(var&i=0;i;i++)&&&&
&&&&&&{&&&&&
&&&&&&&$("#add").append(""+jsonvars[i].name+"");&&&&
&&&&&&&$("#add").append(""+jsonvars&[i].age+"");&&
&&&&&&&}&&&&
&&&&&&},"json");&&&
&&&&&&});&&
&http-equiv="Content-Type"&content="text/&charset=UTF-8"&&&
Insert&title&here&&
&type="submit"&id="tijiao"&value="添加"&&
&border="1"&id="table"&&
&&&&用户名&&
&&&&年龄&&
&&&&id="add"&&
相关资讯 & & &
& (07月16日)
& (06月06日)
& (08月10日)
& (07月15日)
& (05月02日)
图片资讯 & & &
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款页面导航：
→ 正文内容 动态创建表格
基于jquery的动态创建表格的插件
工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。
废话少说直接进入主题， 表格功能: 1、添加 2、删除 3、获取值 4、动态填充数据 5、动态设置焦点 6、键盘左右上下键控制单元格焦点 7、单元格添加正则验证功能 WebForm4.aspx
代码如下: &%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="table.WebForm4" %& &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml" & &head runat="server"& &title&&/title& &script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"&&/script& &script src="jquery-1.3.2.js" type="text/javascript"&&/script& &script src="jquery.DynamicTable.js" type="text/javascript"&&/script& &link href="style2.css" type="text/css" rel="Stylesheet"/& &script type="text/javascript"& var rowtmplate = "&tr&&td class='TableData'&&input type='text' style='border:0 width:98%;'/&&/td&"; rowtmplate += "&td class='TableData'&&input type='text' style='border:0 width:98%;'/&&/td&"; rowtmplate += "&td class='TableData'&&input type='text' style='border:0 width:98%;'/&&/td&"; rowtmplate += "&td class='TableData'&&input type='text' style='border:0 width:98%;'/&&/td&"; rowtmplate += "&td class='TableData'&&input type='text' style='border:0 width:98%;'/&&/td&"; rowtmplate += "&td class='TableData'&&a href='#' &删除&/a&&/td&&/tr&"; $(document).ready(function() { $(this).bind('keyup', function(e) { switch (e.keyCode) { case 38: //上 ↑ var arr = $.fn.getFocus(); var rowIndex = arr[0] - 1; $.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] }); $.fn.setCellsFocus();
case 40: //下 ↓ var arr = $.fn.getFocus(); var rowIndex = arr[0] + 1; $.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] }); $.fn.setCellsFocus();
} }); $('#mytbl').DynamicTable({ rowCount: 3, //添加行数 identity: 1, //第1列自动编号 arrFocus: [2, 1], //第一个单元格设置为焦点 rowTmplate: rowtmplate //行模版 }); $('#mytbl').BindEvent({ eventName: "click", colIndex: 1, fn: alertMsg }); //默认给第一列绑定click事件 $('#mytbl').setCellsFocus(); //设置第一个单元格为焦点 $('#mytbl').deleteRow(); //默认给第6列绑定删除事件 $('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //默认给第二列绑定自动填充数据 $('#mytbl').Identity({ colIndex: 1 }); //默认给第一列自动排序 $('#mytbl').validationText({ reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 5, defalutValue: 0.00 }); //默认给第二列添加验证(只能输入money格式) }); //添加行 function addRow(count) { $('#mytbl').addRow({ rowCount: count }); $('#mytbl').Identity(); $.fn.deleteRow(); } //获取自动填充数据 function getData(key) { var arr = []; arrFoucs = $.fn.getFocus(); $.ajax({ type: "post", async: false, //控制同步 url: "getData.ashx", dataType: "json", cache: false, success: function(data) { var idx = arrFoucs[0] - 2; arr.push(data[idx].id); arr.push(data[idx].Name); arr.push(data[idx].Code); arr.push(data[idx].Units); arr.push(data[idx].Price); }, Error: function(err) { alert(err); } }); $.fn.setCellsFocus({ rowIndex: arrFoucs[0], colIndex: 4 });
} function alertMsg() { arrFoucs = $.fn.getFocus(); alert('你单击了坐标X：'+arrFoucs[0]+' Y：'+arrFoucs[1]+'的单元格'); } &/script& &/head& &body& &form id="form1" runat="server"& &div& &table cellpadding="0" cellspacing="0" class="tablestyle1" id="mytbl"& &tr& &td class="TableData"&序号&/td& &td class="TableData"&产品名称&/td& &td class="TableData"&产品代码&/td& &td class="TableData"&单位&/td& &td class="TableData"&单价&/td& &td class="TableData"&&a href="#" onclick="addRow(5);"&添加5行&/a&&/td& &/tr& &/table& &input type="button" value="获取值" onclick="javascript:alert($.fn.getValue({}));" /& &/div& &/form& &/body& &/html&
jquery.DynamicTable.js
代码如下: ///&reference path="jquery-1.3.2-vsdoc2.js" /& 2 3 (function($) { 4 var rowtmplate = ""; 5 var arrFocus = []; 6 7 $.fn.DynamicTable = function(options) { //定义插件的名称，这里为userCp 8 var deafult = { 9 //以下为该插件的属性及其默认值 rowCount: 5, //添加行数 identity: 1, //第1列自动编号 arrFocus: [2, 1], //第一个单元格设置为焦点 rowTmplate: "" //行模版 }; var ops = $.extend(deafult, options); rowtmplate = ops.rowT arrFocus = ops.arrF $(this).addRow(ops.rowCount); }; /*通过行模版添加多行至表格最后一行后面*/ /*count--添加行数*/ $.fn.addRow = function(options) { var deafult = { rowCount: 5 }; var ops = $.extend(deafult, options); var rowData = ""; var count = ops.rowC for (var i = 1; i &= i++) { rowData += } $(this).find('tr:last-child').after(rowData); CellsFocus(); }; /*动态给某列绑定事件,事件被触发时执行fn函数*/ /*eventName--事件名称;colIndex--列索引(从1开始);fn--触发函数*/ $.fn.BindEvent = function(options) { var deafult = { eventName: 'click', colIndex: 1, fn: function() { alert('你单击了此单元格!') } }; var ops = $.extend(deafult, options); eventName = ops.eventN colIndex = ops.colI fn = ops. $("tr:gt(0) td:nth-child(" + colIndex + ")").bind(eventName, fn); }; /*给某列绑定单击删除事件*/ /*colIndex--列索引(从1开始)*/ $.fn.deleteRow = function(options) { var deafult = { colIndex: 6 }; var ops = $.extend(deafult, options); var colIndex = ops.colI $("tr:gt(0) td:nth-child(" + colIndex + ")").bind("click", function() { var obj = $(this).parent(); //获取tr子节点对象 if (confirm('您确定要删除吗？')) obj.remove(); }); }; /*自动给指定列填充序号*/ /*colIndex--列索引(从1开始)*/ $.fn.Identity = function(options) { var deafult = { colIndex: 1 }; var ops = $.extend(deafult, options); var colIndex = ops.colI var i = 1; $("td:nth-child(" + colIndex + ")").find('input').each(function() { $(this).attr('value', i) i++; }); }; /*获取焦点单元格坐标*/ $.fn.getFocus = function() { return arrF }; /*设置焦点单元格坐标*/ /*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/ $.fn.setFocus = function(options) { var deafult = { rowIndex: 2, colIndex: 1 }; var ops = $.extend(deafult, options); var rowIndex = ops.rowI var colIndex = ops.colI arrFocus[0] = rowI arrFocus[1] = colI }; /*当某个单元格中输入数据,按Enter键后自动根据输入的值从后台检索数据填充到该行对应列*/ /*colIndex--第几列输入数据按Enter键触发事件;fn--带参的回调函数*/ $.fn.AutoFillData = function(options) { colIndex = options.colI fn = options. $("td:nth-child(" + colIndex + ")").bind("keyup", function() { var obj = $(this).parent(); //获取tr子节点对象 $(this).find('input').each(function() { if (event.keyCode == 13) { var vl = $(this).val(); var arr = new Array(); arr = fn(vl); var i = 0; obj.find("td").each(function() { $(this).find("input").each(function() { $(this).attr('value', arr[i]); i++; }); }); } }); }); }; /*设置某个单元格为焦点*/ /*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/ $.fn.setCellsFocus = function(options) { var deafult = { rowIndex: arrFocus[0], colIndex: arrFocus[1] }; var ops = $.extend(deafult, options); var rowIndex = ops.rowI var colIndex = ops.colI $("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() { $(this).find('input').each(function() { $(this)[0].focus(); $(this).attr('value', $(this).attr('value')); arrFocus = []; arrFocus.push(rowIndex); arrFocus.push(colIndex); //更新焦点数组值 }); }); }; /*设置某个单元格文本值为选中状态*/ /*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/ $.fn.setCellsSelect = function(options) { var deafult = { rowIndex: arrFocus[0], colIndex: arrFocus[1] }; var ops = $.extend(deafult, options); var rowIndex = ops.rowI var colIndex = ops.colI $("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() { $(this).find('input').each(function() { $(this)[0].select(); }); }); }; /*某个单元格添加验证功能*/ /*reg--正则表达式;colIndex--列索引(从1开始);defaultValue--验证失败默认给单元格赋值*/ $.fn.validationText = function(options) { var deafult = { reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 2, defaultValue: 0 }; var ops = $.extend(deafult, options); var reg = ops. var colIndex = ops.colI var defaultValue = ops.defaultV $("tr:gt(0) td:nth-child(" + colIndex + ")").each(function() { $(this).find('input').each(function() { //验证 $(this).bind('blur', function() { var vl = $(this).attr('value'); if (!reg.test(vl)) $(this).attr('value', defaultValue); }); }); }); }; /*获取表格中的值*/ $.fn.getValue = function(options) { var deafult = { rowIndex: 0, //行坐标(从2开始) colIndex: 0 //列坐标(从1开始) }; var ops = $.extend(deafult, options); rowIndex = ops.rowI colIndex = ops.colI var val = ""; if (rowIndex == 0) { //获取所有行的数据 $('tr:gt(0)').each(function() { $(this).find("td").each(function() { $(this).find("input").each(function() { val += $(this).attr('value') + "&"; }); }); val = val.substring(0, val.length - 1) + "|"; }); } else { if (colIndex == 0) { //获取某行数据 $('tr:nth-child(' + rowIndex + ')').each(function() { $(this).find("td").each(function() { $(this).find("input").each(function() { val += $(this).attr('value') + "&"; }); }); val = val.substring(0, val.length - 1) + "|"; }); } else { //获取某个单元格的值 $("tr:nth-child(" + rowIndex + ") td:nth-child(" + colIndex + ")").each(function() { $(this).find('input').each(function() { val += $(this).attr('value'); }); }); } }
}; /*某个单元格获取焦点后更新焦点坐标*/ function CellsFocus() { var colCount = $("tr:nth-child(1) td").size(); //获取每行共有多少个单元格 $("tr:gt(0) td").each(function() { var obj = $(this); $(this).find('input').each(function() { $(this).bind('focus', function() { var cellTotal = $('td').index(obj); //获取某单元格的索引 arrFocus[0] = parseInt(cellTotal / colCount) + 1; //第几行 arrFocus[1] = cellTotal % colCount + 1; //第几列 }); }); }); }; })(jQuery);
getData.ashx
代码如下: using S using System.Collections.G using System.L using System.W using System.Web.S namespace table { /// &summary& /// $codebehindclassname$ 的摘要说明 /// &/summary& [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class getData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.Clear(); string value = GetResult(); context.Response.Write(value); context.Response.End(); } private string GetResult() { string result = string.E result = @" [{""id"":""1"",""Name"":""绿茶"",""Code"":""1371"",""Units"":""斤"",""Price"":""200""}, {""id"":""2"",""Name"":""红茶"",""Code"":""1372"",""Units"":""斤"",""Price"":""300""}, {""id"":""3"",""Name"":""茶具"",""Code"":""1373"",""Units"":""台"",""Price"":""20000""}, {""id"":""4"",""Name"":""铁观音"",""Code"":""1374"",""Units"":""瓶"",""Price"":""400""}, {""id"":""5"",""Name"":""袋泡茶"",""Code"":""1375"",""Units"":""盒"",""Price"":""500""}, {""id"":""6"",""Name"":""茶食品"",""Code"":""1376"",""Units"":""盒"",""Price"":""400""}, {""id"":""7"",""Name"":""包装袋"",""Code"":""1377"",""Units"":""盒"",""Price"":""100""}]";
} public bool IsReusable { get {
style2.css
代码如下: /* ---------- 页面样式定义 ---------- */ body { background-color:# MARGIN:0 font-size: 10 /* 字体大小 */ font-family:V /* 字体名称 */ } /* ---------- 文字链接 － 链接的普通状态 ---------- */ A:link { color: #0000FF; TEXT-DECORATION:} /* ---------- 文字链接 － 已被访问链接 ---------- */ A:visited { COLOR: #0000FF; TEXT-DECORATION: none} /* ---------- 文字链接 － 处于活动状态链接 ---------- */ A:active { COLOR: #3333 TEXT-DECORATION: none} /* ---------- 文字链接 － 指针在链接上 ---------- */ A:hover { COLOR: #ff0000; text-decoration:} /* ---------- 表格样式1（普通表格） ---------- */ .tablestyle1{ font-size: 9 /* 表格内字体大小 */ width: 100%; /* 表格宽度 */ border: 0 /* 表格边框宽度 */ background-color: #0077B2; /* 表格线颜色 */ cellSpacing:expression(this.cellSpacing=1); /* 两个单元格之间的距离 */ cellPadding:expression(this.cellPadding=3); } .TableData { BACKGROUND: #FFFFFF; FONT-SIZE: 10 }
由于不知道怎么上传文件 所以只好把代码贴出来 请各位见谅！！！
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910jQuery或者js如何获取动态生成的tr中的值
[问题点数：40分，结帖人YXyangxian]
jQuery或者js如何获取动态生成的tr中的值
[问题点数：40分，结帖人YXyangxian]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2015年8月 .NET技术大版内专家分月排行榜第一2015年7月 .NET技术大版内专家分月排行榜第一2015年6月 .NET技术大版内专家分月排行榜第一2015年5月 .NET技术大版内专家分月排行榜第一2015年4月 .NET技术大版内专家分月排行榜第一
2015年3月 .NET技术大版内专家分月排行榜第二
2015年8月 .NET技术大版内专家分月排行榜第一2015年7月 .NET技术大版内专家分月排行榜第一2015年6月 .NET技术大版内专家分月排行榜第一2015年5月 .NET技术大版内专家分月排行榜第一2015年4月 .NET技术大版内专家分月排行榜第一
2015年3月 .NET技术大版内专家分月排行榜第二
2007年12月 .NET技术大版内专家分月排行榜第二
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。