社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 基於jQuery的動態增刪改查表格訊息，可左鍵/右鍵提示（原自Zjmainstay）_jquery

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

WBOY
發布： 2016-05-16 17:51:21
原創
1522 人瀏覽過

線上示範： 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/
相關標籤：
动态增删 表格信息
來源：php.cn
上一篇：這些年、我收集的JQuery程式碼小結_jquery 下一篇：jQuery.each()用法分享_jquery
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
來自於 2024-04-06 20:57:16
0
1
487
使用opentbs產生odt檔案時遇到的問題：相同key的值顯示在同一行而不是單獨的欄位中。 我正在使用一個名為OpenTbs的庫來使用PHP建立odt，我使用它是因為動態生成列和行。我知道如何建立行和列，但我不知道如何組織它們。讓我加入一個例子：所以首先我會將其添加到我的...
來自於 2024-04-06 20:18:18
0
1
483
僅 CSS 方法可在單擊時動態修改圖片 src，無需使用 JavaScript 我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}
來自於 2024-04-06 19:25:49
0
1
505
狀態更新在 Android 上的 React-Native 中不起作用 我有一些程式碼，其中有成對的圖像，它們都在可滑動的水平圖庫中。現在，當您單擊兩個圖像的上部時，圖像應該關閉切換，所以我所做的是，我將isImage2Active設為狀態，然後只需切...
來自於 2024-04-06 16:54:10
0
1
410
如何將文字寬度與動態大小的圖像/標題的寬度相匹配？ 請參閱此代碼筆：https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0<div><imgsrc=&quo...
來自於 2024-04-06 10:04:43
0
2
386
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板