jquery动态创建表格插件

最新推荐文章于 2021-01-14 03:09:22 发布

weixin_30617737

最新推荐文章于 2021-01-14 03:09:22 发布

阅读量206

点赞数

文章标签： javascript xhtml c# ViewUI

原文链接：http://www.cnblogs.com/jomhy/archive/2011/04/04/2005272.html

版权

工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。
废话少说直接进入主题，

表格功能:
1、添加
2、删除
3、获取值
4、动态填充数据
5、动态设置焦点
6、键盘左右上下键控制单元格焦点
7、单元格添加正则验证功能

WebForm4.aspx

View Code

1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " WebForm4.aspx.cs " Inherits = " table.WebForm4 " %>
2
3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4
5 < html xmlns ="http://www.w3.org/1999/xhtml" >
6 < head runat ="server" >
7 < title ></ title >
8 < script src ="jquery-1.3.2-vsdoc2.js" type ="text/javascript" ></ script >
9 < script src ="jquery-1.3.2.js" type ="text/javascript" ></ script >
10 < script src ="jquery.DynamicTable.js" type ="text/javascript" ></ script >
11 < link href ="style2.css" type ="text/css" rel ="Stylesheet" />
12 < script type ="text/javascript" >
13 var rowtmplate = " <tr><td class='TableData'><input type='text' style='border:0px; width:98%;'/></td> " ;
14 rowtmplate += " <td class='TableData'><input type='text' style='border:0px; width:98%;'/></td> " ;
15 rowtmplate += " <td class='TableData'><input type='text' style='border:0px; width:98%;'/></td> " ;
16 rowtmplate += " <td class='TableData'><input type='text' style='border:0px; width:98%;'/></td> " ;
17 rowtmplate += " <td class='TableData'><input type='text' style='border:0px; width:98%;'/></td> " ;
18 rowtmplate += " <td class='TableData'><a href='#' >删除</a></td></tr> " ;
19
20 $(document).ready( function () {
21
22 $( this ).bind( ' keyup ' , function (e) {
23 switch (e.keyCode) {
24 case 38 : // 上 ↑
25 var arr = $.fn.getFocus();
26 var rowIndex = arr[ 0 ] - 1 ;
27 $.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[ 1 ] });
28 $.fn.setCellsFocus();
29 break ;
30 case 40 : // 下 ↓
31 var arr = $.fn.getFocus();
32 var rowIndex = arr[ 0 ] + 1 ;
33 $.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[ 1 ] });
34 $.fn.setCellsFocus();
35 break ;
36 default :
37 break ;
38
39 }
40 });
41 $( ' #mytbl ' ).DynamicTable({
42 rowCount: 3 , // 添加行数
43 identity: 1 , // 第1列自动编号
44 arrFocus: [ 2 , 1 ], // 第一个单元格设置为焦点
45 rowTmplate: rowtmplate // 行模版
46 });
47
48 $( ' #mytbl ' ).BindEvent({
49 eventName: " click " ,
50 colIndex: 1 ,
51 fn: alertMsg
52 }); // 默认给第一列绑定click事件
53 $( ' #mytbl ' ).setCellsFocus(); // 设置第一个单元格为焦点
54 $( ' #mytbl ' ).deleteRow(); // 默认给第6列绑定删除事件
55 $( ' #mytbl ' ).AutoFillData({ colIndex: 2 , fn: getData }); // 默认给第二列绑定自动填充数据
56 $( ' #mytbl ' ).Identity({ colIndex: 1 }); // 默认给第一列自动排序
57 $( ' #mytbl ' ).validationText({ reg: / ^((\d+\.\d{2})|\d+)$ / , colIndex: 5 , defalutValue: 0.00 }); // 默认给第二列添加验证(只能输入money格式)
58 });
59 // 添加行
60 function addRow(count) {
61 $( ' #mytbl ' ).addRow({ rowCount: count });
62 $( ' #mytbl ' ).Identity();
63 $.fn.deleteRow();
64 }
65 // 获取自动填充数据
66 function getData(key) {
67 var arr = [];
68 arrFoucs = $.fn.getFocus();
69
70 $.ajax({
71 type: " post " ,
72 async: false , // 控制同步
73 url: " getData.ashx " ,
74 dataType: " json " ,
75 cache: false ,
76 success: function (data) {
77 var idx = arrFoucs[ 0 ] - 2 ;
78 arr.push(data[idx].id);
79 arr.push(data[idx].Name);
80 arr.push(data[idx].Code);
81 arr.push(data[idx].Units);
82 arr.push(data[idx].Price);
83 },
84 Error: function (err) {
85 alert(err);
86 }
87 });
88 $.fn.setCellsFocus({ rowIndex: arrFoucs[ 0 ], colIndex: 4 });
89 return arr;
90 }
91 function alertMsg() {
92 arrFoucs = $.fn.getFocus();
93 alert( ' 你单击了坐标X： ' + arrFoucs[ 0 ] + ' Y： ' + arrFoucs[ 1 ] + ' 的单元格 ' );
94 }
95 </ script >
96 </ head >
97 < body >
98 < form id ="form1" runat ="server" >
99 < div >
100 < table cellpadding ="0" cellspacing ="0" class ="tablestyle1" id ="mytbl" >
101 < tr >
102 < td class ="TableData" > 序号 </ td >
103 < td class ="TableData" > 产品名称 </ td >
104 < td class ="TableData" > 产品代码 </ td >
105 < td class ="TableData" > 单位 </ td >
106 < td class ="TableData" > 单价 </ td >
107 < td class ="TableData" >< a href ="#" onclick ="addRow(5);" > 添加5行 </ a ></ td >
108 </ tr >
109 </ table >
110
111 < input type ="button" value ="获取值" onclick ="javascript:alert($.fn.getValue({}));" />
112 </ div >
113 </ form >
114 </ body >
115 </ html >

jquery.DynamicTable.js

View Code

1 // /<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 // 以下为该插件的属性及其默认值
10 rowCount: 5 , // 添加行数
11 identity: 1 , // 第1列自动编号
12 arrFocus: [ 2 , 1 ], // 第一个单元格设置为焦点
13 rowTmplate: "" // 行模版
14 };
15 var ops = $.extend(deafult, options);
16 rowtmplate = ops.rowTmplate;
17 arrFocus = ops.arrFocus;
18 $( this ).addRow(ops.rowCount);
19 };
20
21 /* 通过行模版添加多行至表格最后一行后面 */
22 /* count--添加行数 */
23 $.fn.addRow = function (options) {
24 var deafult = {
25 rowCount: 5
26 };
27 var ops = $.extend(deafult, options);
28
29 var rowData = "" ;
30 var count = ops.rowCount;
31 for ( var i = 1 ; i <= count; i ++ ) {
32 rowData += rowtmplate;
33 }
34 $( this ).find( ' tr:last-child ' ).after(rowData);
35 CellsFocus();
36 };
37 /* 动态给某列绑定事件,事件被触发时执行fn函数 */
38 /* eventName--事件名称;colIndex--列索引(从1开始);fn--触发函数 */
39 $.fn.BindEvent = function (options) {
40 var deafult = {
41 eventName: ' click ' ,
42 colIndex: 1 ,
43 fn: function () { alert( ' 你单击了此单元格! ' ) }
44 };
45 var ops = $.extend(deafult, options);
46 eventName = ops.eventName;
47 colIndex = ops.colIndex;
48 fn = ops.fn;
49 $( " tr:gt(0) td:nth-child( " + colIndex + " ) " ).bind(eventName, fn);
50 };
51 /* 给某列绑定单击删除事件 */
52 /* colIndex--列索引(从1开始) */
53 $.fn.deleteRow = function (options) {
54 var deafult = {
55 colIndex: 6
56 };
57 var ops = $.extend(deafult, options);
58 var colIndex = ops.colIndex;
59
60 $( " tr:gt(0) td:nth-child( " + colIndex + " ) " ).bind( " click " , function () {
61 var obj = $( this ).parent(); // 获取tr子节点对象
62 if (confirm( ' 您确定要删除吗？ ' ))
63 obj.remove();
64 });
65 };
66 /* 自动给指定列填充序号 */
67 /* colIndex--列索引(从1开始) */
68 $.fn.Identity = function (options) {
69 var deafult = {
70 colIndex: 1
71 };
72 var ops = $.extend(deafult, options);
73 var colIndex = ops.colIndex;
74
75 var i = 1 ;
76 $( " td:nth-child( " + colIndex + " ) " ).find( ' input ' ).each( function () {
77 $( this ).attr( ' value ' , i)
78 i ++ ;
79 });
80 };
81 /* 获取焦点单元格坐标 */
82 $.fn.getFocus = function () {
83 return arrFocus;
84 };
85 /* 设置焦点单元格坐标 */
86 /* rowIndex--行索引(从1开始);colIndex--列索引(从1开始) */
87 $.fn.setFocus = function (options) {
88 var deafult = {
89 rowIndex: 2 ,
90 colIndex: 1
91 };
92 var ops = $.extend(deafult, options);
93 var rowIndex = ops.rowIndex;
94 var colIndex = ops.colIndex;
95 arrFocus[ 0 ] = rowIndex;
96 arrFocus[ 1 ] = colIndex;
97 };
98 /* 当某个单元格中输入数据,按Enter键后自动根据输入的值从后台检索数据填充到该行对应列 */
99 /* colIndex--第几列输入数据按Enter键触发事件;fn--带参的回调函数 */
100 $.fn.AutoFillData = function (options) {
101 colIndex = options.colIndex;
102 fn = options.fn;
103 $( " td:nth-child( " + colIndex + " ) " ).bind( " keyup " , function () {
104 var obj = $( this ).parent(); // 获取tr子节点对象
105 $( this ).find( ' input ' ).each( function () {
106 if (event.keyCode == 13 ) {
107 var vl = $( this ).val();
108 var arr = new Array();
109 arr = fn(vl);
110 var i = 0 ;
111 obj.find( " td " ).each( function () {
112 $( this ).find( " input " ).each( function () {
113 $( this ).attr( ' value ' , arr[i]);
114 i ++ ;
115 });
116 });
117 }
118 });
119 });
120 };
121 /* 设置某个单元格为焦点 */
122 /* rowIndex--行索引(从1开始);colIndex--列索引(从1开始) */
123 $.fn.setCellsFocus = function (options) {
124 var deafult = {
125 rowIndex: arrFocus[ 0 ],
126 colIndex: arrFocus[ 1 ]
127 };
128 var ops = $.extend(deafult, options);
129 var rowIndex = ops.rowIndex;
130 var colIndex = ops.colIndex;
131
132 $( " tr:nth-child( " + rowIndex + " ) td:nth-child( " + colIndex + " ) " ).each( function () {
133 $( this ).find( ' input ' ).each( function () {
134 $( this )[ 0 ].focus();
135 $( this ).attr( ' value ' , $( this ).attr( ' value ' ));
136 arrFocus = [];
137 arrFocus.push(rowIndex);
138 arrFocus.push(colIndex); // 更新焦点数组值
139 });
140 });
141 };
142 /* 设置某个单元格文本值为选中状态 */
143 /* rowIndex--行索引(从1开始);colIndex--列索引(从1开始) */
144 $.fn.setCellsSelect = function (options) {
145 var deafult = {
146 rowIndex: arrFocus[ 0 ],
147 colIndex: arrFocus[ 1 ]
148 };
149 var ops = $.extend(deafult, options);
150 var rowIndex = ops.rowIndex;
151 var colIndex = ops.colIndex;
152
153 $( " tr:nth-child( " + rowIndex + " ) td:nth-child( " + colIndex + " ) " ).each( function () {
154 $( this ).find( ' input ' ).each( function () {
155 $( this )[ 0 ].select();
156 });
157 });
158 };
159 /* 某个单元格添加验证功能 */
160 /* reg--正则表达式;colIndex--列索引(从1开始);defaultValue--验证失败默认给单元格赋值 */
161 $.fn.validationText = function (options) {
162 var deafult = {
163 reg: / ^((\d+\.\d{2})|\d+)$ / ,
164 colIndex: 2 ,
165 defaultValue: 0
166 };
167 var ops = $.extend(deafult, options);
168 var reg = ops.reg;
169 var colIndex = ops.colIndex;
170 var defaultValue = ops.defaultValue;
171
172 $( " tr:gt(0) td:nth-child( " + colIndex + " ) " ).each( function () {
173 $( this ).find( ' input ' ).each( function () {
174 // 验证
175 $( this ).bind( ' blur ' , function () {
176 var vl = $( this ).attr( ' value ' );
177 if ( ! reg.test(vl))
178 $( this ).attr( ' value ' , defaultValue);
179 });
180 });
181 });
182 };
183 /* 获取表格中的值 */
184 $.fn.getValue = function (options) {
185 var deafult = {
186 rowIndex: 0 , // 行坐标(从2开始)
187 colIndex: 0 // 列坐标(从1开始)
188 };
189 var ops = $.extend(deafult, options);
190 rowIndex = ops.rowIndex;
191 colIndex = ops.colIndex;
192 var val = "" ;
193 if (rowIndex == 0 ) { // 获取所有行的数据
194 $( ' tr:gt(0) ' ).each( function () {
195 $( this ).find( " td " ).each( function () {
196 $( this ).find( " input " ).each( function () {
197 val += $( this ).attr( ' value ' ) + " & " ;
198 });
199 });
200 val = val.substring( 0 , val.length - 1 ) + " | " ;
201 });
202 }
203 else {
204 if (colIndex == 0 ) { // 获取某行数据
205 $( ' tr:nth-child( ' + rowIndex + ' ) ' ).each( function () {
206 $( this ).find( " td " ).each( function () {
207 $( this ).find( " input " ).each( function () {
208 val += $( this ).attr( ' value ' ) + " & " ;
209 });
210 });
211 val = val.substring( 0 , val.length - 1 ) + " | " ;
212 });
213 }
214 else { // 获取某个单元格的值
215 $( " tr:nth-child( " + rowIndex + " ) td:nth-child( " + colIndex + " ) " ).each( function () {
216 $( this ).find( ' input ' ).each( function () {
217 val += $( this ).attr( ' value ' );
218 });
219 });
220 }
221 }
222 return val;
223 };
224 /* 某个单元格获取焦点后更新焦点坐标 */
225 function CellsFocus() {
226 var colCount = $( " tr:nth-child(1) td " ).size(); // 获取每行共有多少个单元格
227 $( " tr:gt(0) td " ).each( function () {
228 var obj = $( this );
229 $( this ).find( ' input ' ).each( function () {
230 $( this ).bind( ' focus ' , function () {
231 var cellTotal = $( ' td ' ).index(obj); // 获取某单元格的索引
232 arrFocus[ 0 ] = parseInt(cellTotal / colCount) + 1 ; // 第几行
233 arrFocus[ 1 ] = cellTotal % colCount + 1 ; // 第几列
234 });
235 });
236 });
237 };
238 })(jQuery);

getData.ashx

View Code

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Services;
6
7 namespace table
8 {
9 /// <summary>
10 /// $codebehindclassname$ 的摘要说明
11 /// </summary>
12 [WebService(Namespace = " http://tempuri.org/ " )]
13 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14 public class getData : IHttpHandler
15 {
16
17 public void ProcessRequest(HttpContext context)
18 {
19 context.Response.Clear();
20 string value = GetResult();
21 context.Response.Write(value);
22 context.Response.End();
23 }
24
25 private string GetResult()
26 {
27 string result = string .Empty;
28
29 result = @"
30 [{""id"":""1"",""Name"":""绿茶"",""Code"":""1371"",""Units"":""斤"",""Price"":""200""},
31 {""id"":""2"",""Name"":""红茶"",""Code"":""1372"",""Units"":""斤"",""Price"":""300""},
32 {""id"":""3"",""Name"":""茶具"",""Code"":""1373"",""Units"":""台"",""Price"":""20000""},
33 {""id"":""4"",""Name"":""铁观音"",""Code"":""1374"",""Units"":""瓶"",""Price"":""400""},
34 {""id"":""5"",""Name"":""袋泡茶"",""Code"":""1375"",""Units"":""盒"",""Price"":""500""},
35 {""id"":""6"",""Name"":""茶食品"",""Code"":""1376"",""Units"":""盒"",""Price"":""400""},
36 {""id"":""7"",""Name"":""包装袋"",""Code"":""1377"",""Units"":""盒"",""Price"":""100""}] " ;
37
38 return result;
39 }
40
41 public bool IsReusable
42 {
43 get
44 {
45 return false ;
46 }
47 }
48 }
49 }

style2.css

View Code

1 /* ---------- 页面样式定义 ---------- */
2 body
3 {
4 background-color : #ffffff ;
5 MARGIN : 0px ;
6 font-size : 10pt ; /* 字体大小 */
7 font-family : Verdana ; /* 字体名称 */
8 }
9
10 /* ---------- 文字链接－链接的普通状态 ---------- */
11 A:link {
12 color : #0000FF ;
13 TEXT-DECORATION : none ; }
14
15 /* ---------- 文字链接－已被访问链接 ---------- */
16 A:visited {
17 COLOR : #0000FF ;
18 TEXT-DECORATION : none }
19
20 /* ---------- 文字链接－处于活动状态链接 ---------- */
21 A:active {
22 COLOR : #3333ff ;
23 TEXT-DECORATION : none }
24
25 /* ---------- 文字链接－指针在链接上 ---------- */
26 A:hover {
27 COLOR : #ff0000 ;
28 text-decoration : underline ; }
29
30 /* ---------- 表格样式1（普通表格） ---------- */
31 .tablestyle1 {
32 font-size : 9pt ; /* 表格内字体大小 */
33 width : 100% ; /* 表格宽度 */
34 border : 0px none ; /* 表格边框宽度 */
35 background-color : #0077B2 ; /* 表格线颜色 */
36 cellSpacing : expression(this.cellSpacing=1) ; /* 两个单元格之间的距离 */
37 cellPadding : expression(this.cellPadding=3) ; }
38
39
40 .TableData {
41 BACKGROUND : #FFFFFF ;
42 FONT-SIZE : 10pt ;
43 }

由于不知道怎么上传文件所以只好把代码贴出来请各位见谅！！！

转载于:https://www.cnblogs.com/jomhy/archive/2011/04/04/2005272.html

weixin_30617737

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery动态创建表格插件

工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。废话少说直接进入主题，表格功能:1、添加2、删除3、获取值4、动态填充数据5、动态设置焦点6、键盘左右上下键控制单元格焦点7、单元格添加正则验证功能WebForm4.aspxView Code 1 <%@ Page Language="C#" AutoEventWireu...
复制链接

扫一扫