基于jQuery的表的视图修改和删除

设计素描 uff1a

HTML：

全名
年龄
位置
薪水
操作

狼
二十三
前端工程师
一万

看到
删除
修改

丽莎
三十三
java程序猿
一万二千

看到
删除
修改

国王
二十五
美术设计师
九千

看到
删除
修改

全名：
年龄：
位置：
工资：
关闭

全名：
年龄：
位置：
工资：
确定
取消

CSS：

#表{
边境：1px solid # CCC；
边界塌陷：塌陷；
宽度：600px；}
#表TR {身高：30px；}
#表TR：nth-child（2n）{背景颜色：# EEE；}
#表TR，TD { border: 1px solid # CCC；文本对齐：中心；

}
TD {
颜色：红色；
}
popdiv {。
宽度：500px；
border: 1px solid紫色；
位置：绝对；
顶部：50%；左：50%；
margin-left: - 250px；
边距：- 100px；
背景：# FFF；
填料：10px；
显示：无；
Z指数：3；
边境：1px solid # CCC；
}
。popdiv p { border: 1px solid # CCC；填充：5px；}
modifydiv {。
宽度：500px；
border: 1px solid紫色；
位置：绝对；
顶部：50%；左：50%；
margin-left: - 250px；
边距：- 100px；
背景：# FFF；
填料：10px；
显示：无；
Z指数：3；
边境：1px solid # CCC；
}
。modifydiv p { border: 1px solid # CCC；填充：5px；}

JQ：

$（函数（）{（））
检查
$（TD a.view）。Click（function（）{）
添加一个图层蒙版
无功maskheight = $（document）的Height（）；
无功maskwidth = $（document）的Width（）；
$().AppendTo ($(body));
$（div.mask）。Css（{
不透明：0.4，
背景：# 000
位置：绝对
左：0，
顶部：0，
宽度：maskwidth，
高度：maskheight，
Z：2
}）
var arr = { }；
$（））父（）。兄弟（）。每个（函数（）{（）{）
Arr.push（$（this）。文本（））；
}）；
$（。popdiv ），（），（）的孩子。每个（功能（我）{）
$（这）。儿童（跨度）。文本（ARR {我}）；
}）；
$（）。Click（函数（）{）
$（））父（）；
$（掩码）；
}）；
}）；
删除
$（a.del）。Click（function（）{）
$（这个）。父母（）；
}）；
修改函数
}）

页加载，让所有TD都有单击事件
$（文档）Ready（函数（）{）
查找所有TD节点
var = $（）；
要增加单击事件所有TD节点
Tds.dblclick（tdclick）；
}）；

功能tdclick（）{
无功clickfunction =这；
0，获取当前TD节点
var = $（$）；
1，取出当前TD中的文本内容以保存它
文本（$）；
2，在同一个区域清空空TD。
Td.html（）；
3，设置一个文本框，即构建输入节点
变量输入= $（）；
4，设置文本框的中间值是保存的文本内容。
Input.attr（价值
4.5允许文本框对应于键盘按下事件。
Input.keyup（功能（事件）{）
用户卡按下的键
风险事件=事件| | window.event； / /获得事件对象在不同的浏览器
无功kcode = myevent.keycode；
确定媒体是否输入密钥
如果（kcode = = 13）{
无功输入节点（这）= $；
获取文本框的当前内容
VaR inputext = inputnode.val（）；
在里面清空内容，填充里面的内容
无功tdnode = inputnode.parent（）；
TdNode.html（inputext）；
让TD必须单击事件
TdNode.click（tdclick）；
}
}）。Blur（function（）{）
无功输入节点（这）= $；
获取文本框的当前内容
VaR inputext = inputnode.val（）；
在里面清空内容，填充里面的内容
无功tdnode = inputnode.parent（）；
TdNode.html（inputext）；
让TD必须单击事件
TdNode.click（tdclick）；
}）；
5，向TD添加文本框
Td.append（输入）；
5.5允许文本框中的文本被高亮显示。
需要将对象jQuery转换为DOM对象
无功inputdom = input.get（0）；
Inputdom.select（）；

6，您需要知道TD上的单击事件。
Td.unbind（点击）；
}

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。