前言
更新了在页面中如何判断用户名是否已经被输入,这篇博客介绍一下页面中的表格内容如何像excle表格一样修改。
内容
显示效果
照例,先上代码
html代码:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <script src="script/jquery-1.8.2.js"></script> <script type="text/javascript" src="script/edittable.js"></script> <link href="css/edittable.css" rel="stylesheet" /> </head> <body> <table> <thead> <tr> <th colspan="2">鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>0000001</td> <td>张三</td> </tr> <tr> <td>0000002</td> <td>李四</td> </tr> <tr> <td>0000003</td> <td>王五</td> </tr> <tr> <td>0000004</td> <td>赵六</td> </tr> </tbody> </table> </body> </html>
css代码:
table { border:1px solid black; border-collapse:collapse; width:400px; } table td{ border:1px solid black; width:50%; } table th{ border:1px solid black; width:50%; } tbody th { background-color:#a3bae9; }
javascript代码:
//需要首先通过javascript来解决内容部分奇偶行的背景不同 $(function () { //找到表格的内容区域中所有的偶数行 $("tbody tr:even").css("background-color", "#ece9d8"); //找到所有可以编辑的单元格 var numtd = $("tbody td:even"); //给这些单元格注册鼠标点击的事件 numtd.click(function () { //找到当前鼠标点击的td,this对应的就是响应了click的那个td var tdobj = $(this); if (tdobj.children("input").length>0) { //当前td中有内容,不执行click操作 return false; } var text = tdobj.html(); tdobj.html(""); //创建一个文本框 //去掉文本框的边框 //设置文本框中的文字字体大小事15px //是文本框的宽度和td的宽度相同 //设置文本框的背景色 //需要将当前td中的内容放到文本框中 //清空td中的内容 //文本框插入到td中去 var inputobj = $("<input type='text'>").css("border-width", "0").css("font-size", "15px").css("background-color", tdobj.css("background-color")).width(tdobj.width()).val(tdobj.html()).val(text).appendto(tdobj); //使得文本框插入之后就被选中 inputobj.trigger("focus").trigger("select"); inputobj.click(function () { return false; }); //处理文本框上回车和esc按键的操作 inputobj.keyup(function () { //获取当前按下键盘的键值 var keycode = event.which; //处理回车的情况 if (keycode == 13) { //获取到当前文本框中的内容 var inputtext = $(this).val(); //将td的内容修改成文本框中的内容 tdobj.html(inputtext); } //处理esc的情况 if (keycode == 27) { tdobj.html(text); } }); }); });
这次代码稍微有点长,但是对于一目十行的大神们来说这都不算啥!
总结
html知识点:
css知识点:
javascript知识点:
end
谢谢您的阅读!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论