首页
所有分类
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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅（一）
Apr 01 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
js 实现碰撞检测的示例
Oct 28 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
移动开发(2) 安卓(1) IDEA(2) android studio(3) OpenLayer(1) 多线程(6) Sqlite(2) 嵌套(1) 多维数组(1) 循环(3)
You might like
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php object转数组示例
2014/01/15 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP中16个高危函数整理
2019/09/19 PHP
项目实践之javascript技巧
2007/12/06 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
matplotlib设置legend图例代码示例
2017/12/19 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
python实现日志按天分割
2019/07/22 Python
python与idea的集成的实现
2020/11/20 Python
Python 实现一个简单的web服务器
2021/01/03 Python
毕业生求职简历中的自我评价
2013/10/18 职场文书
公司董事长职责
2013/12/12 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
小学六年级学生评语
2014/04/22 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
毕业生学校组织意见
2015/06/04 职场文书