基于jQuery的動態(tài)增刪改查表格信息，可左鍵/右鍵提示（原創(chuàng)自
2024-05-06 14:21:30
供稿：網(wǎng)友
在線演示： http://demo.Vevb.com/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html
//左鍵
代碼如下:
<html>
<head>
<title>jQuery 動態(tài)增刪表格</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://demo.Vevb.com/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var addToTrTop = 10;
var addToTrLeft = 534;
var preEdit = null;
var inputData = '<input id="tmpEditor" type="text" value="?"></input>';
var bindListening = function(){
//表格點(diǎn)擊響應(yīng)
$("td").unbind().click(function(){
var tdData = $("#tmpEditor").val();
if( !$(this).parent().hasClass('editting')) {
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);
var tdData = $(this).html();
$(this).empty().append(inputData.replace('?',tdData));
$("#tmpEditor").focus();
}
}
if(!$(this).parent().hasClass('editting')){
var tipStyle = '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();
});
//刪除當(dāng)前行
$("#delete").unbind().click(function(){
doDeleteTrData($(this),'delete');
bindListening();
});
//編輯當(dāng)前行
$("#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;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){
