表格功能:
1、添加
2、删除
3、获取值
4、动态填充数据
5、动态设置焦点
6、键盘左右上下键控制单元格焦点
7、单元格添加正则验证功能
webform4.aspx
复制代码 代码如下:
序号
产品名称
产品代码
单位
单价
添加5行
jquery.dynamictable.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 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
{
///
/// $codebehindclassname$ 的摘要说明
///
[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;
}
由于不知道怎么上传文件 所以只好把代码贴出来 请各位见谅！！！