管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

基于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;

　　}

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

教程首页 更多教程