表格即时编辑
来源：互联网 发布：marry u软件下载 编辑：程序博客网 时间：2024/06/06 00:06
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
width:120px;
}
</style>
</head>
<body>
<input id="txtId" type="text" style="display:none;width:100px" onblur="save(this)" />
<table id="t">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td colspan="2">操作</td>
</tr>
<tr>
<td><span>狗蛋</span></td>
<td><span>男</span></td>
<td><span>18</span></td>
<td><input id="btnUpdate" type="button" value="修改" /></td>
<td><input id="btnDelete" type="button" value="删除" /></td>
</tr>
<tr>
<td><span>二愣子</span></td>
<td><span>女</span></td>
<td><span>19</span></td>
<td ><input type="button" value="修改" /></td>
<td ><input type="button" value="删除" /></td>
</tr>
<tr>
<td><span>三愣子</span></td>
<td><span>女</span></td>
<td><span>19</span></td>
<td ><input type="button" value="修改" /></td>
<td ><input type="button" value="删除" /></td>
</tr>
<tr>
<td><span>四愣子</span></td>
<td><span>女</span></td>
<td><span>19</span></td>
<td ><input type="button" value="修改" /></td>
<td ><input type="button" value="删除" /></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
//
//1、点击单元格：
// 1)、出现文本框（创建）
// 2)、把单元格里的内容显示在文本框里
function edit(tdDom){
//1、让span消失
tdDom.firstElementChild.style.display="none";
//2、让文本框显示(先把文本框作为当前td的孩子)；
var txtDom = document.getElementById("txtId");
tdDom.appendChild(txtDom);
txtDom.style.display="block";
//3、span的innerHTML赋给文本框的value
txtDom.value = tdDom.firstElementChild.innerHTML;
txtDom.focus();//获得焦点
}
//2、当光标离开文本框：
// 1）、把文本框的内容显示在单元格里
// 2)、把文本框删除掉；
function save(txtDom){
//1、让span显示
txtDom.previousElementSibling.style.display="block";
//2、让文本框消失
txtDom.style.display="none";
//3、文本框的value赋给span的innerHTML
txtDom.previousElementSibling.innerHTML=txtDom.value;
}
window.onload = function(){
//给需要编辑的单元格增加onclick事件
var tbody = document.getElementById("t").firstElementChild;
var trs = tbody.children;
for(var i=1;i<trs.length;i++){
for(var j=0;j<trs[i].children.length-2;j++){
trs[i].children[j].onclick = function(){
edit(this);//this是td。
}
}
}
}
</script>
阅读全文
0 0
- 表格即时编辑
- 编辑表格
- 表格编辑
- Bluefish编辑成果即时预览
- 可编辑表格，ajax编辑表格 js
- 实时编辑表格，可以编辑的表格
- 自由编辑表格
- 可编辑表格TableCell
- Javascript：可编辑表格
- 编辑表格javascript
- 可编辑的表格
- jquery插件【编辑表格】
- 实现可编辑表格
- js可编辑表格
- jquery实现编辑表格
- JQuery_可编辑表格
- 实现可编辑表格
- 实现可编辑表格
- 相似图片查找感知哈希算法（phash）实现
- git分支的创建和删除命令整理
- Django ajax 技术总结
- 前端开发常见问题之Swiper.js的loop模式下，如何正确获取索引值？
- 常见的移动端H5页面开发遇到的坑和解决办法
- 表格即时编辑
- 快速部署ceph集群（ceph做openstack的后端存储）
- jzoj1916 [2011集训队出题] 飞飞侠 spfa
- 数据库视频总结（四）
- Mybatis入门简版（一）
- java第二篇
- 【备忘】最新大数据快速数据挖掘平台RapidMiner数据分析视频教程
- 实验八 文件读写
- 图像分割（一）轮廓提取
