<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
td{
border:1px solid #CCC;
font-size:14px;
}
</style>
<script src="../scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//实现表格可编辑
$(document).ready(function(){
//取出所有的单元格,除第一行的菜单以外
var tds=$("tr:gt(0) td");
//alert(tds.length);
//给每个单元格注册一个单击事件
tds.click(tdClick);
});
function tdClick(){
//得到该单元格的对象
var td=$(this);
//取出改单元格的内容
var tdText=td.text();
//alert(tdText);
//清空改单元格内容
td.empty();//或者td.html("");也可以
//创建一个input文本框
var input=$("<input>");
//将原来的值赋值给input文本框
input.attr("value",tdText);
//给文本框注册一个keyup事件
input.keyup(function(event){
var myevent=event||window.event;
//判断是否是回车键安县
if(myevent.keyCode==13){
//将当前输入的信息保存下来
var inputnode=$(this);
//文本框的值
var inputText=inputnode.val();
//清空改td中的内容
var mytd=inputnode.parent();
mytd.empty();
//将文本框值赋给td
mytd.html(inputText);
//让td重新拥有单击事件
mytd.click(tdClick);
}
});
input.blur(function(){
var mytd=$(this).parent();
var inputText=$(this).val();
mytd.empty();
mytd.html(inputText);
mytd.click(tdClick);
});
//将文本框追加给单元格
td.append(input);
//文本框高亮选中
var inputdom=input.get(0);
inputdom.select();
//td.html(input.val());
//一处该单元格的单击事件
td.unbind("click");
};
</script>
</head>
<body>
<table width="691" style="text-align:center; width:1000px; border:1px solid #CCC; border-collapse:collapse;">
<tr>
<td width="63">姓名</td>
<td width="42">年龄</td>
<td width="42">性别</td>
<td width="354">地址</td>
<td width="213">电话</td>
<td width="258">邮箱</td>
</tr>
<tr>
<td>张三</td>
<td>14</td>
<td>男</td>
<td>宁波市苍松路55号</td>
<td>13599887676</td>
<td>sanzhang@163.com</td>
</tr>
<tr>
<td>李四</td>
<td>16</td>
<td>男</td>
<td>宁波市海曙区解放南路15号</td>
<td>13199887646</td>
<td>sili@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>男</td>
<td>宁波市海曙区鄞奉路55号</td>
<td>13899887672</td>
<td>wuwang@163.com</td>
</tr>
<tr>
<td>张婷婷</td>
<td>18</td>
<td>女</td>
<td>宁波市海曙区环城西路45号</td>
<td>13199887226</td>
<td>tingting@163.com</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
JQuery实现的简单可编辑表格,其中的数据可以根据需要从数据里读取,这里暂时写成静态的,只是为了演示一下JQuery的方便之处。
JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx
JQuery可编辑表格、横向纵向菜单、标签页、级联下拉框、窗口
一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
jQuery 可编辑表格, 使用 Jqrery 快速实现表格的编辑功能,单击修改表格内容,样式可调。轻量级的 H5代码。
JQuery实现可编辑的表格JQuery实现可编辑的表格
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
jQuery实现可编辑化的表格,有兴趣的可以看看
代码片段: 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table>
有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
jquery可编辑表格可以对表格进行无刷新的编辑
jQuery+Bootstrap表格内容修改删除编辑插件,随便传的
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
DataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zip