基于jQuery实现表格的查看修改删除

前端之家收集整理的这篇文章主要介绍了基于jQuery实现表格的查看修改删除前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图:

HTML:

姓名 年龄 职位 薪资 操作

姓名:

年龄:

职位:

薪资:

关闭

姓名:

年龄:

职位:

薪资:

CSS:

}
td a{
color:red;
}
.popDiv{
width:500px;
border:1px solid purple;
position:absolute;
top:50%;left:50%;
margin-left:-250px;
margin-top:-100px;
background:#fff;
padding:10px;
display:none;
z-index:3;
border:1px solid #ccc;
}
.popDiv p{border:1px solid #ccc;padding:5px;}
.modifyDiv{
width:500px;
border:1px solid purple;
position:absolute;
top:50%;left:50%;
margin-left:-250px;
margin-top:-100px;
background:#fff;
padding:10px;
display:none;
z-index:3;
border:1px solid #ccc;
}
.modifyDiv p{border:1px solid #ccc;padding:5px;}

JQ:

添加遮罩层*/ var maskHeight=$(document).height(); var maskWidth=$(document).width(); $("
").appendTo($("body")); $("div.mask").css({ "opacity":0.4,"background":"#000","position":"absolute","left":0,"top":0,"width":maskWidth,"height":maskHeight,"z-index":2 }) var arr=[]; $(this).parent().siblings().each(function(){ arr.push($(this).text()); }); $(".popDiv").show().children().each(function(i){ $(this).children("span").text(arr[i]); }); $(".close").click(function(){ $(this).parent().hide(); $(".mask").remove(); }); }); //删除 $("a.del").click(function(){ $(this).parents("tr").remove(); }); /*修改功能*/ })

//在页面装载时,让所有的td都拥有点击事件
$(document).ready(function(){
//找到所有td节点
var tds = $("td").not(":last-child");
//给所有的td节点增加点击事件
tds.dblclick(tdclick);
});

function tdclick(){
var clickfunction = this;
//0,获取当前的td节点
var td = $(this);
//1,取出当前td中的文本内容保存起来
var text = $(this).text();
//2,清空td里边内同
td.html("");
//3,建立一个文本框,也就是建一个input节点
var input = $("");
//4,设置文本框中值是保存起来的文本内容
input.attr("value",text);
//4.5让文本框可以相应键盘按下的事件
input.keyup(function(event){
//记牌器当前用户按下的键值
var myEvent = event || window.event;//获取不同浏览器中的event对象
var kcode = myEvent.keyCode;
//判断是否是回车键按下
if(kcode == 13){
var inputnode = $(this);
//获取当前文本框的内容
var inputext = inputnode.val();
//清空td里边的内容,然后将内容填充到里边
var tdNode = inputnode.parent();
tdNode.html(inputext);
//让td重新拥有点击事件
tdNode.click(tdclick);
}
}).blur(function(){
var inputnode = $(this);
//获取当前文本框的内容
var inputext = inputnode.val();
//清空td里边的内容,然后将内容填充到里边
var tdNode = inputnode.parent();
tdNode.html(inputext);
//让td重新拥有点击事件
tdNode.click(tdclick);
});
//5,把文本框加入到td里边去
td.append(input);
//5.5让文本框里边的文章被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom = input.get(0);
inputdom.select();

//6,需要清楚td上的点击事件
td.unbind("click");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/46923.html

猜你在找的jQuery相关文章