首页
所有分类
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 相关文章推荐
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
php的文件上传入门教程（实例讲解）
Apr 10 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
排序失效(1) NFS(1) 临时表(1) Logrotate(1) timestamp(1) T-SQL(1) 批处理(1) 黑名单(1) 重复数据(2) 表变量(1)
You might like
set_include_path在win和linux下的区别
2008/01/10 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Python读写ini文件的方法
2015/05/28 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
解决Python一行输出不显示的问题
2018/12/03 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
英国剑桥包官网：The Cambridge Satchel Company
2016/08/01 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
违纪检讨书2000字
2014/02/08 职场文书
求职意向书
2014/07/29 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
python如何在word中存储本地图片
2021/04/07 Python