JQuery实例：可以编辑的表格

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>JQuery实例2：可以编辑的表格</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/editTable.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/editTable.js"></script></head><body><table><thead><tr><th colspan="2">鼠标点击表格项就可以编辑</th></tr></thead><tbody><tr><th>学号</th><th>姓名</th></tr><tr><td>000001</td><td>张三</td></tr><tr><td>000002</td><td>李四</td></tr><tr><td>000003</td><td>王五</td></tr><tr><td>000004</td><td>赵六</td></tr></tbody></table></body>
</html>

editTable.js代码

//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
//简化的ready写法
$(function(){//找到表格的内容区域中所有的奇数行//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行$("tbody tr:even").css("background-color","#ECE9D8");//我们需要找到所有的学号单元格var numTd = $("tbody td");//给这些单元格注册鼠标点击的事件numTd.click(function() {  //找到当前鼠标点击的td,this对应的就是响应了click的那个tdvar tdObj = $(this);if (tdObj.children("input").length > 0) {//当前td中input，不执行click处理return false;}var text = tdObj.html(); //清空td中的内容tdObj.html("");//创建一个文本框//去掉文本框的边框//设置文本框中的文字字体大小是16px//使文本框的宽度和td的宽度相同//设置文本框的背景色//需要将当前td中的内容放到文本框中//将文本框插入到td中var inputObj = $("<input type='text'>").css("border-width","0").css("font-size","16px").width(tdObj.width()).css("background-color",tdObj.css("background-color")).val(text).appendTo(tdObj);//是文本框插入之后就被选中inputObj.trigger("focus").trigger("select");inputObj.click(function() {return false;});//处理文本框上回车和esc按键的操作OinputObj.keyup(function(event){//获取当前按下键盘的键值var keycode = event.which;//处理回车的情况if (keycode == 13) {//获取当当前文本框中的内容var inputtext = $(this).val();//将td的内容修改成文本框中的内容tdObj.html(inputtext);}//处理esc的情况if (keycode == 27) {//将td中的内容还原成texttdObj.html(text);}});});
});

JQuery实例：可以编辑的表格相关推荐

使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素.在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格. 如果想看教程演示的话,请点击这里查看. 开始你要 ...
可编辑的表格：jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击"确定"按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击& ...
php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
python怎么编辑excel_python 修改excel表格数据-关于如何用python 编辑 excel表格
python对Excel中数据的处理把你的写入excel 的内容编码一哈例如 str('内容').encode('utf-8') 或者str('内容').encode('gbk') 再写入exce ...
单击单元格实现可编辑的表格(学号和姓名下)
单击单元格实现可编辑的表格(学号和姓名下) 编辑完成后按Enter确定,Esc取消 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
php 检测表格双击操作,PHP+jQuery实现双击修改table表格功能示例
本文实例讲述了PHP+jQuery实现双击修改table表格功能.分享给大家供大家参考,具体如下: 即点即改 $con = array( array("id"=>1,&quo ...
实习总结之jquery实例
实习情况经过了一段程序员的生活,感受到了程序员的苦逼,但也学到了不少,今天稍做总结,一方面系统的复习一下实习中学到的内容,另一方面,请老鸟们指点一下,好了,废话不多说,今天就先温习一下jquery系 ...
php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

JQuery实例：可以编辑的表格

JQuery实例：可以编辑的表格相关推荐

最新文章

热门文章