基於jQuery的動態增刪改查表格訊息，可左鍵/右鍵提示（原自Zjmainstay）

首頁

web前端

js教程

基於jQuery的動態增刪改查表格訊息，可左鍵/右鍵提示（原自Zjmainstay）_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:51 PM

線上示範： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html
//左鍵

複製程式碼程式碼如下:

 
 
 
jQuery 動態增刪表格 
> 
 
 
頭> 
 
 
$(document).ready(function(){ 
var addToTrTop = 10; 
var addToTrLeft = 534; 
var preEdit = null; 
var inputidData = ''; 
var bindListening = function(){ 
//表格點擊回應
$("td"). unbind ().click(function(){ 
var tdData = $("#tmpEditor").val(); 
if( !$(this).parent().hasClass('編輯')) { 
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); $(this).html() ; 
$(this).empty().append(inputData.replace('?',tdData)); 
$("#tmpEditor").focus(); 
} 
} 
if(!$(this).parent().hasClass('編輯')){ 
vartipStyle = 'top:' (parseInt($(this).offset) ().top) addToTrTop) ' px;left:' (parseInt($(this).parent().offset().left) addToTrLeft) '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() 
}); 
var addTrData = $("tr:first").clone(true).attr('class','newAdd'); 
var getIndex = function(clickedTd,type){ 
var fields = $("tr "); 
var addIndex = -1; 
for(var i=1;ivartipStyle = 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 '向上': 
addIndex = i-1; 
休息； 
case '向下': 
case '編輯': 
case '刪除': 
addIndex = i; 
休息; 
} 
} 
} 
return addIndex; 
} 
var doAddTrData = function(ctypeedT. 
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(); 
回傳錯誤; 
} 
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 (); 
回傳錯誤; 
} 
var doEditTrData = function(clickedTd,type){ 
if(getIndex(clickedTd,type) == -1) return false 
var index=getIndex(clickedTd,type); 
} 
$("table tr").eq(index).addClass('編輯'); 
$("#clickTips") .hide(); 
回傳錯誤; 
} 
} 
bindListening(); 
}); 
腳本> 

表格{ 
寬度：580px; 
保證金：0 自動； 
} 
td,#tmpEditor{ 
顯示：塊； 
浮動：左； 
邊框：1px實心#000000; 
邊距：自動0.5px; 
寬度：60px; 
高度：20px; 
} 
#clickTips{ 
邊框# 000000; 
位置：絕對; 
左：3px； 
寬度：120px; 
內邊距：3px; 
顯示：無； 
背景顏色：#F5FFFA； 
顯示：無；
背景顏色：#F5FFFA； >z-index:3; 
} 
跨度{ 
浮動：左； 
寬度：100px; 
高度：20px; 
明確：兩者； 
} 
.cloneTr{ 
顯示：無； 
} 
.newAdd td{ 
背景顏色:#FFFACD; 
} 
.編輯td{ 
背景顏色：# F0F0F0; 
}
風格> 
 
; 
 
  
  
  
  
  
  
  
  

 
 
  
  
  
  
  
  
  
1 

 
 
  
  
  
  
  
  
  
2 

 
 
  td> 


  
  
  
  
  td> 


  
3 

 
 
  
  
  
  
  
  
  
4 

 
 
  
  
  
  
  
  
  
5 

 
 
  
  
  
  
  
  
  
 6 

 
 


 
向上增加一行 
修改目前一行 
增加一行 
刪除目前行; 


身體> 

jqueryAutoAddDeleteTableTr_rightClick.html
////////22/////22/////////// ）右鍵功能）

複製程式碼程式碼如下：

 
 
 
jQuery 動態增刪表格 
> 
 
 
頭> 
 
 
$(document).ready(function(){ 
var addToTrTop = 10; 
var addToTrLeft = 60; 
var preEdit = null; 
var inputDataid = '' 
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; 
回傳false; 
} 
函數norightclick(e){ 
if(!e) var e=window.event; 
if (window.Event){ 
if (e .which == 2 || e.which == 3) 
回傳false 
}else if (e.keyCode == 2 || e.keyCode == 3){ 
e.cancelBubble = true 
e.returnValue = false; 
return false 
} 
} 
document.oncontextmenu = nocontextmenu; // forIE5 
document.onmousedown = norightclickmenu; // forIE5 
document.onmousedown = norightclick u; // forIE5 
document.onmousedown = norightclick; /結束亮度;瀏覽器右鍵
//表格正確答案
$("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){ 
vartipStyle = 'top:' (parseInt($(this).offset().top) addToTrTop) 'px;left :' (parseInt($(this)) .offset().left) addToTrLeft) 'px;'; 
$("#clickTips").attr('style',tipStyle).show(); 
回傳錯誤； 
} 
if(code == 1){ 
if( !$(this).parent().hasClass('編輯')) { 
preEdit&&preEdit.empty() .html(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(tdData.trim(' ')); 
preEdit = null; 
}else { 
if(!$("#tmpEditor").val()) { 
preEdit = $(this); 
var tdData = $(this).html(); 
$( this).empty().append(inputData.replace('?',tdData)); 
$("#tmpEditor").focus(); 
} 
} 
回傳false； 
} 
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() 
}); 
} >var addTrData = $("tr:first").clone(true).attr('class','newAdd'); 
var getIndex = function(clickedTd,type){ 
var fields = $( "tr"); 
var addIndex = -1; 
for(var i=1;ivartipStyle = 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 '向上': 
addIndex = i-1; 
休息； 
case '向下': 
case '編輯': 
 case '刪除': 
addIndex = i; 
休息; 
} 
} 
} 
return addIndex; 
} 
var doAddDataData = function(ctypeedTdunction(ctype, ){ 
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(); 
回傳錯誤; 
} 
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(); 
回傳錯誤; 
} 
var doEditTrData = function(clickedTd,type){ 
if(getIndex(clickedTd,type) == -1) return false; 
 else { 
var index=getIndex(clickedTd,type); 
} 
$("table tr").eq(index).addClass('編輯'); 
$("#clickTips ").hide(); 
回傳錯誤; 
} 
} 
bindListening(); 
}); 
腳本> 

表格{ 
寬度：580px; 
保證金：0 自動； 
} 
td,#tmpEditor{ 
顯示：塊； 
浮動：左； 
邊框：1px實心#000000; 
邊距：自動0.5px; 
寬度：60px; 
高度：20px; }
#clickTips{ 
邊框：1px 實心#000000; 
位置：絕對； 
左：3px; 
寬度：120px; 
內邊邊距：3px>顯示； ：無； 
背景顏色：#F5FFFA; 
z-index:3; 
} 
跨度{ 
浮動：左； 
寬度：100px； 
高度：20pxx ; 
明確：兩者; 
} 
.cloneTr{ 
顯示：無; 
} 
.newAdd td{ 
背景顏色:#FFFACD; 
} 
} 
.編輯td{ 
背景顏色：#F0F0F0; 
} 
風格> 
 
; 
 
  
  
  
  
  
  
  
  

 
 
  
  
  
  
  
  
  
1 

 
 
  


  
  
  
  
  


  
2 

 
 
  
   
  
  
  
  
   
3 

 
 
  
  
  
  
  
  
  
4 

 
 
  
  
  
  
  
  
  
5 

 
 
  
  
  
  
  
  
  
6 

 
表> 


 
向上增加一行 
修改目前一行 
增加一行 
刪除目前行; 


身體> 

jqueryAutoAddDeleteTableTr_leftClick_addsearch.htmljqueryAutoAddDeleteTableTr_leftClick_addsearch.html

/左鍵新增功能複製程式碼

程式碼如下：

jQuery 動態增刪表格
>

頭>

$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 534;
var addToTdLeft = 60; = null;
var inputData = '';
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.修剪(' ' ));
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('編輯')){
if(!addToTdLeft){
var offsetLeft = (parseInt($) (this).parent().offset().left) addToTrLeft);
}else {
var offsetLeft = (parseInt($(this).offset().left) addToTdLeft);
}
vartipStyle = '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 ;iRegExp = '[^,]*' trs.eq (1).find('input').eq(i).val() '[^,]*,' ;
}
//不加eval則正規符合錯誤
RegExp = eval ('/' RegExp.substr(0,RegExp.length-1) '/i'); = [];
for(var i=2;istringObject[ i] = '';
for(var j=0;jstringObject[i] = trs.eq(i).find('td').eq(j). html() ',';}
stringObject[i] = stringObject[i ].substr(0,stringObject[i].length-1).toString()
}
for(var i= 2;iif(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;ivartipStyle = 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 '向上':
addIndex = i-1;
休息；
case '向下':
case '編輯':
case '刪除':
addIndex = i;
休息；
}
}
}
return addIndex;
}
$("#clearSearchButton").click(function(){
$("#clickTips"). hide();
$(".搜尋輸入[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();
回傳錯誤；
}
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();
回傳錯誤；
}
var doEditTrData = function(clickedTd,type){
if(getIndex(clickedTd,type) == -1) return false;
else {
var index=getIndex(clickedTdtype);
}
$("table tr").eq(index).addClass('編輯');
$("#clickTips").hide();
回傳錯誤；
}
}
bindListening();
});
腳本>

表格{
邊距： 0 自動；
}
td,#tmpEditor{
顯示：塊；
浮動：左；
邊框：1px實心#000000;
邊距：自動0.5px
寬度：60px;
高度：20px;
}
#clickTips{
邊框：1px 實心#000000;
位置：絕對；
左：3p；寬度：120px；
內邊距：3px；
顯示：無;
背景顏色：#F5FFFA;
z-index:3;
}
跨度{
浮動：左；
寬度：100px;
高度：20px;
明確：兩者;
}
.cloneTr{
顯示：無；
}
.newAdd td{
背景顏色:#FFFACD;
}
.編輯td{
背景顏色：#F0F0F0;
}
.search{
背景顏色：# dddccc;
}
.搜尋輸入{
padding-bottom: 0;
右內邊距：7px;
}
.searchButtonTd{
float:left; 🎜>}
#searchButton,#clearSearchButton{
margin-left: -2px;
頂部邊距：-2px;
底部填充：0;
右內邊距：20px；
底部填充：0;
右內邊距：20px；
}
風格>

;

1
2 td >
3
4
5
6
7
8

a
b
b td>
c
d
e
f
g
h

A
B
C
D
E
F
G
H

aa
bb
cc
dd
ee
ff
gg
hh

111
222
333
444
555
666
777
888

1a
2b
3c
4d
5e
6f
7g
8小時

表>

往上增加一行
修改目前一行
增加一行
刪除目前行;

身體>

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

var addToTdLeft = 60;如果設定雙設定1TdLeftaddToTTrftdTot>LTotTLftL8Tot>LftTWEft距離當前tr頂部和左部的偏移量，可自行修改，可為負數表示上移或左移。

軟體下載：
下載
作者：Zjmainstay　　　　出處：http://www.cnblogs.com/Zjmainstay/

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn