基于jquery的動態(tài)創(chuàng)建表格的插件

更新時間：2011年04月05日 20:40:55 作者：

工作快一年了,最近學(xué)習(xí)jquery，對jquery很感興趣。第一次寫博客，有不足之處還請各位拍磚。

廢話少說直接進(jìn)入主題，
表格功能:
1、添加
2、刪除
3、獲取值
4、動態(tài)填充數(shù)據(jù)
5、動態(tài)設(shè)置焦點
6、鍵盤左右上下鍵控制單元格焦點
7、單元格添加正則驗證功能
WebForm4.aspx

復(fù)制代碼代碼如下:

 
<%@ 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, //添加行數(shù) 
identity: 1, //第1列自動編號 
arrFocus: [2, 1], //第一個單元格設(shè)置為焦點 
rowTmplate: rowtmplate //行模版 
}); 
$('#mytbl').BindEvent({ 
eventName: "click", 
colIndex: 1, 
fn: alertMsg 
}); //默認(rèn)給第一列綁定click事件 
$('#mytbl').setCellsFocus(); //設(shè)置第一個單元格為焦點 
$('#mytbl').deleteRow(); //默認(rèn)給第6列綁定刪除事件 
$('#mytbl').AutoFillData({ colIndex: 2, fn: getData }); //默認(rèn)給第二列綁定自動填充數(shù)據(jù) 
$('#mytbl').Identity({ colIndex: 1 }); //默認(rèn)給第一列自動排序 
$('#mytbl').validationText({ reg: /^((\d+\.\d{2})|\d+)$/, colIndex: 5, defalutValue: 0.00 }); //默認(rèn)給第二列添加驗證(只能輸入money格式) 
}); 
//添加行 
function addRow(count) { 
$('#mytbl').addRow({ rowCount: count }); 
$('#mytbl').Identity(); 
$.fn.deleteRow(); 
} 
//獲取自動填充數(shù)據(jù) 
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('你單擊了坐標(biāo)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">產(chǎn)品名稱</td> 
<td class="TableData">產(chǎn)品代碼</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

復(fù)制代碼代碼如下:

 
///<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 //以下為該插件的屬性及其默認(rèn)值 
rowCount: 5, //添加行數(shù) 
identity: 1, //第1列自動編號 
arrFocus: [2, 1], //第一個單元格設(shè)置為焦點 
rowTmplate: "" //行模版 
}; 
var ops = $.extend(deafult, options); 
rowtmplate = ops.rowTmplate; 
arrFocus = ops.arrFocus; 
$(this).addRow(ops.rowCount); 
}; 
/*通過行模版添加多行至表格最后一行后面*/ 
/*count--添加行數(shù)*/ 
$.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(); 
}; 
/*動態(tài)給某列綁定事件,事件被觸發(fā)時執(zhí)行fn函數(shù)*/ 
/*eventName--事件名稱;colIndex--列索引(從1開始);fn--觸發(fā)函數(shù)*/ 
$.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子節(jié)點對象 
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++; 
}); 
}; 
/*獲取焦點單元格坐標(biāo)*/ 
$.fn.getFocus = function() { 
return arrFocus; 
}; 
/*設(shè)置焦點單元格坐標(biāo)*/ 
/*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; 
}; 
/*當(dāng)某個單元格中輸入數(shù)據(jù),按Enter鍵后自動根據(jù)輸入的值從后臺檢索數(shù)據(jù)填充到該行對應(yīng)列*/ 
/*colIndex--第幾列輸入數(shù)據(jù)按Enter鍵觸發(fā)事件;fn--帶參的回調(diào)函數(shù)*/ 
$.fn.AutoFillData = function(options) { 
colIndex = options.colIndex; 
fn = options.fn; 
$("td:nth-child(" + colIndex + ")").bind("keyup", function() { 
var obj = $(this).parent(); //獲取tr子節(jié)點對象 
$(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++; 
}); 
}); 
} 
}); 
}); 
}; 
/*設(shè)置某個單元格為焦點*/ 
/*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); //更新焦點數(shù)組值 
}); 
}); 
}; 
/*設(shè)置某個單元格文本值為選中狀態(tài)*/ 
/*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--正則表達(dá)式;colIndex--列索引(從1開始);defaultValue--驗證失敗默認(rèn)給單元格賦值*/ 
$.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, //行坐標(biāo)(從2開始) 
colIndex: 0 //列坐標(biāo)(從1開始) 
}; 
var ops = $.extend(deafult, options); 
rowIndex = ops.rowIndex; 
colIndex = ops.colIndex; 
var val = ""; 
if (rowIndex == 0) { //獲取所有行的數(shù)據(jù) 
$('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) { //獲取某行數(shù)據(jù) 
$('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; 
}; 
/*某個單元格獲取焦點后更新焦點坐標(biāo)*/ 
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

復(fù)制代碼代碼如下:

 
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

復(fù)制代碼代碼如下:

 
/* ---------- 頁面樣式定義 ---------- */ 
body 
{ 
background-color:#ffffff; 
MARGIN:0px; 
font-size: 10pt; /* 字體大小 */ 
font-family:Verdana; /* 字體名稱 */ 
} 
/* ---------- 文字鏈接 － 鏈接的普通狀態(tài) ---------- */ 
A:link { 
color: #0000FF; 
TEXT-DECORATION: none;} 
/* ---------- 文字鏈接 － 已被訪問鏈接 ---------- */ 
A:visited { 
COLOR: #0000FF; 
TEXT-DECORATION: none} 
/* ---------- 文字鏈接 － 處于活動狀態(tài)鏈接 ---------- */ 
A:active { 
COLOR: #3333ff; 
TEXT-DECORATION: none} 
/* ---------- 文字鏈接 － 指針在鏈接上 ---------- */ 
A:hover { 
COLOR: #ff0000; 
text-decoration: underline;} 
/* ---------- 表格樣式1（普通表格） ---------- */ 
.tablestyle1{ 
font-size: 9pt; /* 表格內(nèi)字體大小 */ 
width: 100%; /* 表格寬度 */ 
border: 0px none; /* 表格邊框?qū)挾?*/ 
background-color: #0077B2; /* 表格線顏色 */ 
cellSpacing:expression(this.cellSpacing=1); /* 兩個單元格之間的距離 */ 
cellPadding:expression(this.cellPadding=3); } 
.TableData { 
BACKGROUND: #FFFFFF; 
FONT-SIZE: 10pt; 
} 