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 ...
随机推荐
- sshfs 实现普通用户可读写
先实现普通用户免密码host1可登入host2host1# yum install fuse sshfs; 如果装不上,需要安装epep源 --enablerepo=epelhost1# su - e ...
- x01.Weiqi.10: 死活问题
估计得不错,点目后,仅一个方法:UpdateMeshes5() 就完美解决了梅花六.刀把五.斗笠四.盘角曲四等死活问题.先来看看效果图: 其代码如下: void UpdateMeshes5(bool ...
- jQuery validator自定义
项目中接触到validator,记录下 jQuery.validator.addMethod("isStrongPwd", function(value, element){ va ...
- Ubuntu中root用户和user用户
从user用户切换到root用户 在ununtu系统中缺省用户是user,出于安全考虑,默认时Ubuntu的root用户时没有固定密码的,它的密码是随机产生并且动态改变的. 但是有的时候我们的用户要执 ...
- LLVM 笔记（五）—— LLVM IR
ilocker:关注 Android 安全(新手) QQ: 2597294287 LLVM 的 IR (Intermediate Representation) 是其设计中的最重要的部分.优化器在进行 ...
- 报表开发导出各种格式文件的API
文件输出的多样性,准确性和稳定性对于我们常用的报表软件来说很重要.报表的输入是指从报表的模板文件(XML格式的)创建WorkBook对象,输出则指将报表保存为各种格式文件,比如Pdf.Excel.Wo ...
- Java JDBC基础学习小结
JDBC是一个Java应用程序接口,作用是封装了对数据库的各种操作.JDBC由类和接口组成,使用Java开发数据库应用都需要4个主要的接口:Driver.Connection.Statement.Re ...
- Caffe源码解析6：Neuron_Layer
转载请注明出处,楼燚(yì)航的blog,http://home.cnblogs.com/louyihang-loves-baiyan/ NeuronLayer,顾名思义这里就是神经元,激活函数的相应 ...
- 一些工具&名词
长期维护更新: 极光推送.个推---移动端消息推送 花生壳---外网访问内网 跳板机-堡垒机 jumpserver开源跳板机 DJANGO --- python web开发架构 Apache Shir ...
- BZOJ1588: [HNOI2002]营业额统计[BST]
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 14151 Solved: 5366[Submit][Sta ...