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/1999/xhtml">
<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://files.cnblogs.com/Zjmainstay/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(){
console.log('bind'); //记录绑定调用
//表格点击响应
$("td").unbind().click(function(){
if($(this).hasClass('search')) return false;
var tdData = $("#tmpEditor").val();
if( !$(this).parent().hasClass('editting')) {
preEdit&&preEdit.empty().html($.trim(tdData));
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($.trim(tdData));
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();
}
});
//向上增加一行
$("#addUp").unbind().click(function(){
doAddTrData($(this),'up');
bindListening();
});
//向下增加一行
$("#addDown").unbind().click(function(){
doAddTrData($(this),'down');
bindListening();
});
//删除当前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
});
//编辑当前行
$("#edit").unbind().click(function(){
doEditTrData($(this),'edit');
});
//查询操作
$("#searchButton").click(function(){
$("#clickTips").hide();
var trs = $("#tableContainer").find("tr");
var tdLength = trs.eq(0).children('td').length;
var pattern = '';
for(var i=0;i<tdLength;i++){
pattern += '[^,]*'+trs.eq(1).find('input').eq(i).val()+'[^,]*,';
}
pattern = pattern.substr(0,pattern.length-1); //删除末尾逗号
pattern = new RegExp(pattern); //转成正则表达式
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(pattern)) {
trs.eq(i).hide();
}else{
trs.eq(i).show();
}
}
});
$("#clearSearchButton").click(function(){
$("#clickTips").hide();
$(".search input[type=text]").val('');
$("tr:gt(0)").show();
})
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{
margin:0 auto;
}
td{
display:block;
float:left;
border:1px solid #000000;
margin:auto 0.5px;
width:60px;
height:20px;
}
#tmpEditor {
display:block;
float:left;
border:1px solid #000000;
height: 16px;
margin: 0;
width: 58px;
}
#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>
jQuery动态增删改查表格信息，可左键/右键提示的更多相关文章
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- mybatis的动态增删改查
1.动态SQL片段 通过SQL片段达到代码复用 <!-- 动态条件分页查询 --> <sql id="sql_count"> select count(*) ...
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- SSM 整合 quartz JDBC方式实现job动态增删改查记录
虽然网上有很多资料,但是都不够系统,本文记录下自己的整合过程. 1. 搭建一个SSM项目,此处略. 2. 按照quartz官方要求,建立quartz相关的数据库和表,相关sql语句如下: /* Nav ...
- 实现Quartz的动态增删改查
1. Maven依赖 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...
- iOS开发-plist文件增删改查
plist第一次看到这个后缀名文件的时候感觉怪怪的,不过接触久了也就习以为常了,plist是Property List的简称可以理解成属性列表文件,主要用来存储串行化后的对象的文件.扩展名为.plis ...
- java操作数据库：增删改查
不多bb了直接上. 工具:myeclipse 2016,mysql 5.7 目的:java操作数据库增删改查商品信息 test数据库的goods表 gid主键,自增 1.实体类Goods:封装数据库数 ...
- 使用MySQL练习增删改查时因为版本问题出现连接错误
使用MySQL练习增删改查时出现连接错误,错误提示如下: 2020-02-19 19:53:51.088 ERROR 16328 --- [reate-249798694] com.alibaba.d ...
随机推荐
- python之数据库操作
数据库操作 Python 操作 Mysql 模块的安装 1 2 3 4 5 linux: yum install MySQL-python window: http://files ...
- 聊下 git rebase -i
在使用git作为源代码管理工具的时候,开发的时经常会面临一个常见的问题,多个commit 需要合并为一个完整的commit提交. 在一个基本的迭代周期里,你会有很多次commit,有跟配置文件相关的, ...
- Tomcat中更改网站根目录
Tomcat的默认目录是指向webapps下的root目录,输入http://localhost:8080,会打开root目录下的页面.我想让localhost指向我自己的目录.比如webapps/m ...
- Chrome
一.简介 二.安装 1)离线版 http://www.google.cn/chrome/browser/thankyou.html?statcb=1&platform=win64&st ...
- RedHat6.2搭建FTP服务器
我的环境: A:Red Hat Enterprise 6.2 IP:192.168.16.12 此机作测试端 B:Red Hat Enterprise 6.2 IP:192.168.16.13 此机做 ...
- ik扩展支持Solr配置
扩展ik原生代码:public class IKAnalyzerTokenizerFactory extends TokenizerFactory{ private boolean useSmart; ...
- 不同材质怎么通过ZBrush赋予同一个模型上
ZBrush 作为最专业的数字雕刻与绘画软件,能够制作出高质量的3D模型,包括模型的颜色贴图和材质属性.不同材质可以改变照明在表面上的反应,以便模型表现出光泽.凹凸.反射.金属性或透明效果.ZBrus ...
- FTP协议
1. FTP协议 什么是FTP呢?FTP 是 TCP/IP 协议组中的协议之一,是英文File Transfer Protocol的缩写. 该协议是Internet文件传送的基础,它由一系列规格说明文 ...
- Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds...
仰天长啸 Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds... 当启动tomcat时候出现 ...
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 能支撑10万以上客户端的数据同步下载问题
庞大的业务系统,特别是需要有离线作业操作支持的核心业务系统,需要有强大的基础数据同步功能,基础数据有在增加.有在变动.有在失效,同时有大量的客户端全天侯的在连接服务器.不间断的在处理核心数据. 经过2 ...