文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-21 22:42

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


$.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.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);
};


$.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();
});
};


$.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;
};


$.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;
};


$.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++;
});
});
}
});
});
};


$.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); //更新焦点数组值
});
});
};


$.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();
});
});
};


$.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;}

.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;
}

由于不知道怎么上传文件 所以只好把代码贴出来 请各位见谅！！！
阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

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

前端开发2022-11-21

jQuery如何实现表格元素动态创建功能

前端开发2024-04-02

创建jQuery插件的建议有哪些

前端开发2024-04-02

使用Glance轻松创建动态的小插件

前端开发GlanceJetpack2024-11-30

基于jquery的合并table相同单元格的插件(精简版)

前端开发2022-11-21

基于jquery的15款幻灯片插件

前端开发2022-11-21

基于jquery日历价格、库存等设置插件的示例分析

前端开发2024-04-02

哪10条建议能创建更好的jQuery插件

前端开发2024-04-02

基于PHP+Jquery制作的可编辑的表格的代码

前端开发2022-11-21

再次分享18个非常棒的jQuery表格插件

前端开发2022-11-21

基于CSS3+jQuery动态时钟制作的示例分析

前端开发2023-06-12

drupal创建拖动排序表格的方法

前端开发2022-06-12

Vue3基于countUp.js实现数字滚动的插件

前端开发2023-05-17

基于Eclipse的Flex代码格式化插件怎么用

前端开发2023-06-17

基于jQuery的合并表格中相同文本的相邻单元格的代码

前端开发2022-11-21

Vue动态组件表格的实现代码

前端开发2022-11-13

如何基于jQuery插件jqzoom实现的图片放大镜效果

前端开发2024-04-02

PHP 表单处理的秘诀：创建动态且安全的表单

PHP 表单处理的秘诀：创建动态且安全的表单
前端开发2024-03-14

怎么编写插件机制优化基于Antd Table封装表格的混乱代码

前端开发2024-04-02

iSCSI之基于用户的认证及基于配置文件创建iSCSI

前端开发2024-04-02
位置：首页-资讯-前端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯