首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jquery的动态创建表格的插件

Posted in Javascript onApril 05, 2011

废话少说直接进入主题，
表格功能:
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; 
}

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

基于jquery的动态创建表格的插件

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 #Javascript
新鲜出炉的js tips提示效果
Apr 03 #Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 #Javascript
dreamweaver 安装Jquery智能提示
Apr 02 #Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 #Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 #Javascript
JQuery文本框高亮显示插件代码
Apr 02 #Javascript
AOP(2) V Rising(1) Android Gradle(1) 自定义函数(1) 记事本(1) Kotlin(1) Spring Security(2) Navicat(1) 动态权限(1) maven(2)
You might like
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
详解React Native 屏幕适配（炒鸡简单的方法）
2018/06/11 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python开发中module模块用法实例分析
2015/11/12 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
LEGO玩具英国官方商店：LEGO Shop GB
2018/03/27 全球购物
美国汽车零部件和配件网站：CarParts
2019/03/13 全球购物
Aosom西班牙：家具在线商店
2020/06/11 全球购物
产品陈列协议书（标准版）
2014/09/17 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技