返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自

2020-05-23 06:01:50易采站长站整理

在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html
//左键 

<html>
<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://demo.jb51.net/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(){
//表格点击响应
$(“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();
});
//删除当前行
$(“#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;i<fields.length;i++){
var tipStyle = clickedTd.parent().attr(‘style’);

相关文章 大家在看