基于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:0px; width:98%;'/></td>"; 
rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>"; 
rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>"; 
rowtmplate += "<td class='TableData'><input type='text' style='border:0px; width:98%;'/></td>"; 
rowtmplate += "<td class='TableData'><input type='text' style='border:0px; 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(); 
break; 
case 40: //下 ↓ 
var arr = $.fn.getFocus(); 
var rowIndex = arr[0] + 1; 
$.fn.setFocus({ rowIndex: rowIndex, colIndex: arr[1] }); 
$.fn.setCellsFocus(); 
break; 
default: 
break; 
} 
}); 
$('#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 }); 
return arr; 
} 
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.rowTmplate; 
arrFocus = ops.arrFocus; 
$(this).addRow(ops.rowCount); 
}; 
/*通过行模版添加多行至表格最后一行后面*/ 
/*count--添加行数*/ 
$.fn.addRow = function(options) { 
var deafult = { 
rowCount: 5 
}; 
var ops = $.extend(deafult, options); 
var rowData = ""; 
var count = ops.rowCount; 
for (var i = 1; i <= count; i++) { 
rowData += rowtmplate; 
} 
$(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.eventName; 
colIndex = ops.colIndex; 
fn = ops.fn; 
$("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.colIndex; 
$("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.colIndex; 
var i = 1; 
$("td:nth-child(" + colIndex + ")").find('input').each(function() { 
$(this).attr('value', i) 
i++; 
}); 
}; 
/*获取焦点单元格坐标*/ 
$.fn.getFocus = function() { 
return arrFocus; 
}; 
/*设置焦点单元格坐标*/ 
/*rowIndex--行索引(从1开始);colIndex--列索引(从1开始)*/ 
$.fn.setFocus = function(options) { 
var deafult = { 
rowIndex: 2, 
colIndex: 1 
}; 
var ops = $.extend(deafult, options); 
var rowIndex = ops.rowIndex; 
var colIndex = ops.colIndex; 
arrFocus[0] = rowIndex; 
arrFocus[1] = colIndex; 
}; 
/*当某个单元格中输入数据,按Enter键后自动根据输入的值从后台检索数据填充到该行对应列*/ 
/*colIndex--第几列输入数据按Enter键触发事件;fn--带参的回调函数*/ 
$.fn.AutoFillData = function(options) { 
colIndex = options.colIndex; 
fn = options.fn; 
$("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.rowIndex; 
var colIndex = ops.colIndex; 
$("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.rowIndex; 
var colIndex = ops.colIndex; 
$("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.reg; 
var colIndex = ops.colIndex; 
var defaultValue = ops.defaultValue; 
$("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.rowIndex; 
colIndex = ops.colIndex; 
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'); 
}); 
}); 
} 
} 
return val; 
}; 
/*某个单元格获取焦点后更新焦点坐标*/ 
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 System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
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.Empty; 
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""}]"; 
return result; 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
} 

style2.css

复制代码代码如下:

/* ---------- 页面样式定义 ---------- */ 
body 
{ 
background-color:#ffffff; 
MARGIN:0px; 
font-size: 10pt; /* 字体大小 */ 
font-family:Verdana; /* 字体名称 */ 
} 
/* ---------- 文字链接 － 链接的普通状态 ---------- */ 
A:link { 
color: #0000FF; 
TEXT-DECORATION: none;} 
/* ---------- 文字链接 － 已被访问链接 ---------- */ 
A:visited { 
COLOR: #0000FF; 
TEXT-DECORATION: none} 
/* ---------- 文字链接 － 处于活动状态链接 ---------- */ 
A:active { 
COLOR: #3333ff; 
TEXT-DECORATION: none} 
/* ---------- 文字链接 － 指针在链接上 ---------- */ 
A:hover { 
COLOR: #ff0000; 
text-decoration: underline;} 
/* ---------- 表格样式1（普通表格） ---------- */ 
.tablestyle1{ 
font-size: 9pt; /* 表格内字体大小 */ 
width: 100%; /* 表格宽度 */ 
border: 0px none; /* 表格边框宽度 */ 
background-color: #0077B2; /* 表格线颜色 */ 
cellSpacing:expression(this.cellSpacing=1); /* 两个单元格之间的距离 */ 
cellPadding:expression(this.cellPadding=3); } 
.TableData { 
BACKGROUND: #FFFFFF; 
FONT-SIZE: 10pt; 
} 