基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

2024-12-18 04:34:04

在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html
//左键

代码如下:

jqueryAutoAddDeleteTableTr_rightClick.html
//右键（含屏蔽浏览器右键功能）

代码如下:

<html>
<head>
<title>jQuery 动态增删表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 60;
var preEdit = null;
var inputData = '<input id="tmpEditor" type="text" value="?"></input>';
var bindListening = function(){
//屏蔽浏览器右键
if (window.Event) document.captureEvents(Event.MOUSEUP);
function nocontextmenu(e){
if(!e) var e=window.event;
e.cancelBubble = true
e.returnValue = false;
return false;
}
function norightclick(e){
if(!e) var e=window.event;
if (window.Event){
if (e.which == 2 || e.which == 3)
return false;
}else if (e.keyCode == 2 || e.keyCode == 3){
e.cancelBubble = true
e.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//End 屏蔽浏览器右键
//表格右键响应
$("td").mousedown(function(e){
var code;
if(!e) var e=window.event;
if(e.keyCode) {
code=e.keyCode;
}else if(e.which){
code = e.which;
}
var tdData = $("#tmpEditor").val();
if(code == 3){
var tipStyle = 'top:'+(parseInt($(this).offset().top)+addToTrTop)+'px;left:'+(parseInt($(this).offset().left)+addToTrLeft)+'px;';
$("#clickTips").attr('style',tipStyle).show();
return false;
}
if(code == 1){
if( !$(this).parent().hasClass('editting')) {
preEdit&&preEdit.empty().html(tdData.trim(' '));
preEdit = null;
$("#tmpEditor").parent().empty().html($("#tmpEditor").val());
$(".editting").removeClass('editting');
}else if( preEdit && (preEdit.parent().children().index($(preEdit)) != $(this).parent().children().index($(this))) ){
preEdit.empty().html(tdData.trim(' '));
preEdit = null;
}else{
if(!$("#tmpEditor").val()) {
preEdit = $(this);
var tdData = $(this).html();
$(this).empty().append(inputData.replace('?',tdData));
$("#tmpEditor").focus();
}
}
return false;
}
bindListening();
}); //End 表格右键响应
//向上增加一行
$("#addUp").unbind().click(function(){
doAddTrData($(this),'up');
bindListening();
});
//向下增加一行
$("#addDown").unbind().click(function(){
doAddTrData($(this),'down');
bindListening();
});
//删除当前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
bindListening();
});
//编辑当前行
$("#edit").unbind().click(function(){
doEditTrData($(this),'edit');
bindListening();
});
var addTrData = $("tr:first").clone(true).attr('class','newAdd');
var getIndex = function(clickedTd,type){
var fields = $("tr");
var addIndex = -1;
for(var i=1;i<fields.length;i++){
var tipStyle = clickedTd.parent().attr('style');
var topValue = 'top: '+(parseInt(fields.eq(i).offset().top)+addToTrTop);
var ie_topValue = 'top: '+(parseInt(fields.eq(i).offset().top)+(addToTrTop-2));
if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) {
switch(type.toLowerCase()){
case 'up':
addIndex = i-1;
break;
case 'down':
case 'edit':
case 'delete':
addIndex = i;
break;
}
}
}
return addIndex;
}
var doAddTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).after(addTrData);
setTimeout('$(".newAdd").attr("class",null)',1000);
$("#clickTips").hide();
return false;
}
var doDeleteTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).remove();
$("#clickTips").hide();
return false;
}
var doEditTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).addClass('editting');
$("#clickTips").hide();
return false;
}
}
bindListening();
});
</script>
<style type="text/css">
table{
width:580px;
margin:0 auto;
}
td,#tmpEditor{
display:block;
float:left;
border:1px solid #000000;
margin:auto 0.5px;
width:60px;
height:20px;
}
#clickTips{
border:1px solid #000000;
position:absolute;
left:3px;
width:120px;
padding:3px;
display:none;
background-color:#F5FFFA;
z-index:3;
}
span{
float:left;
width:100px;
height:20px;
clear:both;
}
.cloneTr{
display:none;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}
</style>
<div id="tableContainer">
<table>
<tr class="cloneTr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>6</td>
</tr>
</table>
</div>
<div id="clickTips">
<span id="addUp">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="addDown">向下增加一行</span>
<span id="delete">删除当前行</span>
</div>
</body>
</html>

jqueryAutoAddDeleteTableTr_leftClick_addsearch.html
//左键添加查询功能

代码如下:

<html>
<head>
<title>jQuery 动态增删表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 534;
var addToTdLeft = 60; //若设置addToTdLeft则addToTrLeft失效
var preEdit = null;
var inputData = '<input id="tmpEditor" type="text" value="?"></input>';
var bindListening = function(){
//表格点击响应
$("td").unbind().click(function(){
if($(this).hasClass('search')) return false;
var tdData = $("#tmpEditor").val();
if( !$(this).parent().hasClass('editting')) {
preEdit&&preEdit.empty().html(tdData.trim(' '));
preEdit = null;
$("#tmpEditor").parent().empty().html($("#tmpEditor").val());
$(".editting").removeClass('editting');
}else if( preEdit && (preEdit.parent().children().index($(preEdit)) != $(this).parent().children().index($(this))) ){
preEdit.empty().html(tdData.trim(' '));
preEdit = null;
}else{
if(!$("#tmpEditor").val()) {
preEdit = $(this);
var tdData = $(this).html();
$(this).empty().append(inputData.replace('?',tdData));
$("#tmpEditor").focus();
}
}
if(!$(this).parent().hasClass('editting')){
if(!addToTdLeft){
var offsetLeft = (parseInt($(this).parent().offset().left)+addToTrLeft);
}else {
var offsetLeft = (parseInt($(this).offset().left)+addToTdLeft);
}
var tipStyle = 'top:'+(parseInt($(this).offset().top)+addToTrTop)+'px;left:'+offsetLeft+'px;';
$("#clickTips").attr('style',tipStyle).show();
}
bindListening();
});
//向上增加一行
$("#addUp").unbind().click(function(){
doAddTrData($(this),'up');
bindListening();
});
//向下增加一行
$("#addDown").unbind().click(function(){
doAddTrData($(this),'down');
bindListening();
});
//删除当前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
bindListening();
});
//编辑当前行
$("#edit").unbind().click(function(){
doEditTrData($(this),'edit');
bindListening();
});
//查询操作
$("#searchButton").click(function(){
$("#clickTips").hide();
var trs = $("#tableContainer").find("tr");
var tdLength = trs.eq(0).children('td').length;
var RegExp = '';
for(var i=0;i<tdLength;i++){
RegExp += '[^,]*'+trs.eq(1).find('input').eq(i).val()+'[^,]*,';
}
//不加eval则正则匹配失效
RegExp = eval('/' + RegExp.substr(0,RegExp.length-1) + '/i');
var stringObject = [];
for(var i=2;i<trs.length;i++){
stringObject[i] = '';
for(var j=0;j<tdLength;j++){
stringObject[i] += trs.eq(i).find('td').eq(j).html()+',';
}
stringObject[i] = stringObject[i].substr(0,stringObject[i].length-1).toString();
}
for(var i=2;i<trs.length;i++){
if(stringObject[i].search(RegExp)) {
trs.eq(i).hide();
}else{
trs.eq(i).show();
}
}
bindListening();
});
var addTrData = $("tr:first").clone(true).attr('class','newAdd');
var getIndex = function(clickedTd,type){
var fields = $("tr");
var addIndex = -1;
for(var i=1;i<fields.length;i++){
var tipStyle = clickedTd.parent().attr('style');
var topValue = 'top: '+(parseInt(fields.eq(i).offset().top)+addToTrTop);
var ie_topValue = 'top: '+(parseInt(fields.eq(i).offset().top)+(addToTrTop-2));
if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) {
switch(type.toLowerCase()){
case 'up':
addIndex = i-1;
break;
case 'down':
case 'edit':
case 'delete':
addIndex = i;
break;
}
}
}
return addIndex;
}
$("#clearSearchButton").click(function(){
$("#clickTips").hide();
$(".search input[type=text]").val('');
$("tr").show();
$("tr.cloneTr").hide();
})
var doAddTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).after(addTrData);
setTimeout('$(".newAdd").attr("class",null)',1000);
$("#clickTips").hide();
return false;
}
var doDeleteTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).remove();
$("#clickTips").hide();
return false;
}
var doEditTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTd,type);
}
$("table tr").eq(index).addClass('editting');
$("#clickTips").hide();
return false;
}
}
bindListening();
});
</script>
<style type="text/css">
table{
margin:0 auto;
}
td,#tmpEditor{
display:block;
float:left;
border:1px solid #000000;
margin:auto 0.5px;
width:60px;
height:20px;
}
#clickTips{
border:1px solid #000000;
position:absolute;
left:3px;
width:120px;
padding:3px;
display:none;
background-color:#F5FFFA;
z-index:3;
}
span{
float:left;
width:100px;
height:20px;
clear:both;
}
.cloneTr{
display:none;
}
.newAdd td{
background-color:#FFFACD;
}
.editting td{
background-color:#F0F0F0;
}
.search{
background-color:#dddccc;
}
.search input{
padding-bottom: 0;
padding-right: 7px;
}
.searchButtonTd{
float:left;
}
#searchButton,#clearSearchButton{
margin-left: -2px;
margin-top: -2px;
padding-bottom: 0;
padding-right: 20px;
}
</style>
<div id="tableContainer">
<table>
<tr class="cloneTr">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search"><input type="text" size="6"/></td>
<td class="search searchButtonTd"><input id="searchButton" type="button" size="10" value="查询"/></td>
<td class="search searchButtonTd"><input id="clearSearchButton" type="button" size="10" value="清除"/></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>666</td>
<td>777</td>
<td>888</td>
</tr>
<tr>
<td>1a</td>
<td>2b</td>
<td>3c</td>
<td>4d</td>
<td>5e</td>
<td>6f</td>
<td>7g</td>
<td>8h</td>
</tr>
</table>
</div>
<div id="clickTips">
<span id="addUp">向上增加一行</span>
<span id="edit">修改当前一行</span>
<span id="addDown">向下增加一行</span>
<span id="delete">删除当前行</span>
</div>
</body>
</html>

PS:
var addToTrTop = 10;
var addToTrLeft = 534;

var addToTdLeft = 60; //若设置addToTdLeft则addToTrLeft失效

表示提示DIV clickTips距离当前tr顶部和左部的偏移量，可自行修改，可为负数表示上移或左移。

软件下载：下载
作者：Zjmainstay　　　　
出处：http://www.cnblogs.com/Zjmainstay/

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

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

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

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

一.需求:有这么一张表前四个属性当作联合主键需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行.类似这种: 二.初解决:先上来把数据库的数据查询出来,以List<Activity> activities保存,再存到json对象中传回页面.像这样json.put("activities",activities); 到js页面了,然后就开始蒙蔽了.本来
JQuery实现动态表格点击按钮表格增加一行

功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取点击删除,自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows); var e_id = tr.insertCell(0); e_id.innerHTML = '<input type="t
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

在线演示: http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html//左键复制代码代码如下: <html> <head> <title>jQuery 动态增删表格</title> <meta http-equiv="Content-Type" content="text/html
Python+Django+MySQL实现基于Web版的增删改查的示例代码

前言本篇使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web,少走弯路.效果演示在项目实战最后一节,文章结尾有整个项目的源码地址. 开发环境开发工具:Pycharm 2020.1 开发语言:Python 3.8.0 Web框架:Django 3.0.6 数据库:MySQL5.7 操作系统:Windows 10 项目实战 1. 创建项目 File->New Project->Django
Java基于jdbc实现的增删改查操作示例

本文实例讲述了Java基于jdbc实现的增删改查操作.分享给大家供大家参考,具体如下: 增删改操作: package java_web; import java.sql.DriverManager; import java.sql.SQLException; import com.mysql.jdbc.Connection; import com.mysql.jdbc.Statement; /** * jdbc CURD * @author Administrator * */ public c
Mybatis实现动态增删改查功能的示例代码

一.Mybatis 流程简介最近在看 Mybatis 的源码,大致了解整个框架流程后便手写了一个特别简单的SimpMybatis的小Demo,来巩固这整个框架的学习.下图是我所画的框架大致执行流程:
mybatis <foreach>标签动态增删改查方式

目录 <foreach>标签动态增删改查 mybatis<foreach> 实战有了建表以及插入,当然少不了删除和更新 mapper.xml中<foreach>标签使用适用场景 <foreach>标签动态增删改查 mybatis<foreach> 有的时候在项目中需要查询某个列表时,可能会在代码中进行嵌套循环再取值,其实mybatis提供了这么一个标签,可以在SQL中进行循环(是不是很酸爽) 先来了解一下foreach这个标签有哪些元素: i
基于PHP实现原生增删改查的示例代码

目录一.代码 1.sql 2.列表页(index.php) 3.delete.php 4.update.php 5.create.php 二.效果图一.代码 1.sql -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 2022-03-19 19:16:40 -- 服务器版本:10.1.13-MariaDB -- PHP
详解Nodejs基于mongoose模块的增删改查的操作

MongoDB MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换带来的时间空间开销. Mongoose 是MongoDB的一个对象模型工具,它将数据库中的数据转换为JavaScript对象以供你在应用中使用,封装了MongoDB对文档的的一些增删改查等常用方法,让NodeJS操作Mongodb数据库变得更加灵活简单. 安装模块mongoose npm install
Java对象转JSON时动态的增删改查属性详解

1. 前言日常开发中少不了JSON处理,少不了需要在JSON中添加额外字段或者删除特定字段的需求.今天我们就使用Jackson类库来实现这个功能. 2. JSON字符串增加额外字段假如我们有这样结构的JSON: { "username":"felord.cn", "age":18 } 期望增加一个性别字段gender: { "username": "felord.cn", "age"
koa+mongoose实现简单增删改查接口的示例代码

配合上一篇文章的联系人应用(https://www.jb51.net/article/161160.htm),实现配套的基于nodejs的后台增删改查接口 1. 所需工具 node.js mongoDB 2. 主要node模块 koa(https://koa.bootcss.com,一个nodejs的开发框架),mongoose(https://mongoosejs.com,mongDB操作工具) 3. 目录结构 4. 启动MongoDB 首先在MongoDB安装盘的根目录下(这里假设是D盘)新
jQuery对table表格进行增删改查

最近要处理一些前端的工作,重新学习了一下jQuery,感觉还是那么的锋利啊!!! 总结了一下对table的增删改查,写一篇留着以后自己recode. 1.首先我自己写了一个简单的div布局. 2.实现几个用<a>标签做的按钮的功能分别是新增修改删除查询和返回. 代码如下 html+css(原谅我写在一起吧..毕竟渲染不是我的强项) <html> <head><title>测试数据</title></head> <styl

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

相关推荐

随机推荐