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 |
向上增加一行
修改目前一行
增加一行
刪除目前行;
身體>
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 |
表>
向上增加一行
修改目前一行
增加一行
刪除目前行;
身體>
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 ;i
RegExp = '[^,]*' 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小時 |
表>
往上增加一行
修改目前一行
增加一行
刪除目前行;
身體>