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

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

时间: 2011-04-02

JQuery动态添加和删除表格行的方法

本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi

原生JS和JQuery动态添加、删除表格行的方法

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

jquery动态增加删除表格行的小例子

复制代码 代码如下: <script src="jquery/jquery-1.3.1.js"></script><style type="text/css">body{background:#FFFFFF;}</style></head><body><script> $(function(){ var show_count = 20;   //要显示的条数 var count =

Jquery 动态循环输出表格具体方法

实现功能:1.有一个同学叫我实现一个这样的功能就像PHP,在表单中输入数字,然后网页就出现相应的数量:如果是PHP的话就简单多了,Jquery实现还是第一个,就开始狂的实验,最后还是实现了(知识点:Jquery创建节点.获取表单的值.循环语句)Jquery代码: 复制代码 代码如下: <script type="text/javascript" language="javascript">$(function(){$("#btn").

Jquery 动态生成表格示例代码

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

jQuery实现表格行和列的动态添加与删除方法【测试可用】

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/19

JQuery实现表格动态增加行并对新行添加事件

实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并绑定timepicker 三:表2自动增加行,新行绑定timepicker HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

jQuery实现的简单动态添加、删除表格功能示例

本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;

基于jQuery的动态表格插件

在这里我们需要控制用户的输入验证,表格的添加删除,用户输入数据的统计聚合,还有相应的计算列比如商品的总价=商品的单价*商品数量,再如,同时在用户提交的时候我还要需要获取提交到后台服务端处理在存储到我们的数据库.本插件则简单的处理了这些繁琐的事情. 插件属性说明: 1:rowTemplate:这是插入列的模板,在模板中我们的序号这种行号标示的需要rownum 的class.在模板中的需要唯一编号的比如我们的radiobutton的name属性在每个td单元格需要唯一的name组,再如id这种需要唯

JQuery Ajax动态生成Table表格

前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

jQuery实现html表格动态添加新行的方法

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

C# DataGridView添加新行的2个方法

可以静态绑定数据源,这样就自动为DataGridView控件添加 相应的行.假如需要动态为DataGridView控件添加新行,方法有很多种,下面简单介绍如何为DataGridView控件动态添加新行的两种方 法: 方法一: 复制代码 代码如下: int index=this.dataGridView1.Rows.Add();this.dataGridView1.Rows[index].Cells[0].Value = "1"; this.dataGridView1.Rows[inde

jQuery实现为table表格动态添加或删除tr功能示例

本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: <!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDeta

Layui给数据表格动态添加一行并跳转到添加行所在页的方法

Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

jQuery代码实现表格中点击相应行变色功能

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

jQuery实现表单动态添加与删除数据操作示例

本文实例讲述了jQuery实现表单动态添加与删除数据操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户名注册</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

jQuery实现表单动态添加数据并提交的方法

本文实例讲述了jQuery实现表单动态添加数据并提交的方法.分享给大家供大家参考,具体如下: 情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.a

python中pandas.DataFrame对行与列求和及添加新行与列示例

本文介绍的是python中pandas.DataFrame对行与列求和及添加新行与列的相关资料,下面话不多说,来看看详细的介绍吧. 方法如下: 导入模块: from pandas import DataFrame import pandas as pd import numpy as np 生成DataFrame数据 df = DataFrame(np.random.randn(4, 5), columns=['A', 'B', 'C', 'D', 'E']) DataFrame数据预览: A

jQuery 实时保存页面动态添加的数据的示例

本文介绍了jQuery 实时保存页面动态添加的数据的示例,分享给大家,具体如下: 需求:用户填写的东西,必须要实时保存 分析:监听用户操作事件,如:change.keyup 等,向后端发送请求 实际情况: 用户填写的表单,是通过 JavaScript 动态新增的,这就需要使用为动态新增元素绑定事件. 发送请求给后端,取决于前面的必填项是否已经完整填写. 必须区分用户是动态新增了填写栏目呢?还是在修改? 当前事件对象是什么?怎么通过该对象获取用户输入的数据? 用户多次修改同一栏目,必须传送带有 I