1. 首先,看一下代码.
1//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
$(function(){
//找到表格的内容区域中所有的偶数行
$("tbody tr:even").css("background-color","#E3E9D8");
//我们需要找到所有学号的单元格
var numTd=$("tbody td:even");
//给这些单元格注册鼠标点击事件
numTd.click(function(){
//找到当前鼠标点击的td,this对应的就是响应了click的那个td
var 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.get(0).select();
inputObj.trigger("focus").trigger("select");
//处理文本框上回车和esc按键的操作
inputObj.keyup(function(event){
//获取当前按下键的键值
var keycode=event.which;
//处理回车的情况
if(keycode==13){
//获取当前文本框中的内容
var inputtext=$(this).val();
//将td中的内容修改为文本框的内容
tdObj.html(inputtext);
}
//处理ESC的情况
if(keycode==27){
//将td中的内容还原成text
tdObj.html(text);
}
});
});
});
2. 代码总结
(1)
<table>
<thead>
<tr>
<th colspan="2">鼠标点击表格项就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</tbody>
</table>
table中可以包含thead和tbody
表头的内容可以放在thead和tbdoy的th标签中.
(2)
table{
border:1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse:collapse;
width:400px;
}
可以通过border-collapse:collapse这种方式 来使表格中的单元格的边框合并
(3) 当th上有背景色时,这个th属于的tr上定义的背景色会无效
(4) css()方法可以用于 设定获取 节点的css属性,参数名是css的属性名.
(5) jquery的对象内容包含着选择器对应的 DOM节点,以数组形式保存.
(6) get()方法可以获得jquery对象中包含的某一个dom节点
(7) $()方法的参数 是一个DOM对象时,这个方法相当于把DOM对象转换为jquery对象
(8) children() 方法可以获得某个节点的子节点,可以指定参数来限制子节点的内容.
(9) 如果选择器返回的jquery对象中包含多个DOM节点,在这个对象上注册类似click这样的事件时,
所有的DOM节点都会用于事件.
(10) html()方法可以 设置或获取 节点的html内容.
if(keycode==13){
//获取当前文本框中的内容
var inputtext=$(this).val();
//将td中的内容修改为文本框的内容
tdObj.html(inputtext);
}
var text=tdObj.html();//获取节点的html内容
//清空td中的内容
tdObj.html("");
(11) val()方法可以 设置或获取 节点的value值
(12) $()方法的参数 如果是一段正确的html文本,则可以创建一个DOM节点,并包装成jquery对象.
var inputObj=$("<input type='text'>")
(13) width方法可以 设置或获取 某个节点的宽度.
var inputObj=$("<input type='text'>").css("border-width","0")
.css("font-size","16px")
.width(tdObj.width())
(14) appendTo方法可以将一个节点追加到另一个节点所有子节点的后面
(15) 阻止事件传递可以让当前节点的事件返回false
if(tdObj.children("input").length>0){
//当前td中有input,不执行click处理
return false;
}
(16) safari浏览器 必须要先focus文本框 再 select选中文本内容。其他浏览器直接select就可以选中文本
(17) trigger()方法可以触发某个javascript的事件方法
//使文本框插入之后就被选中
//inputObj.get(0).select();
inputObj.trigger("focus").trigger("select");
(18) jquery中某个事件方法的参数 function上可以定义一个event的参数。jquery会屏蔽浏览器的event差异,
传给我们一个可以的event对象。
(19) jquery的event对象上有一个which属性可以获得键盘按键的值。
(20) keycode=13 回车键 keycode=27 ESC键
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery实战:可以编辑的表格 JQuery实战:可以编辑的表格
帮助初学jquery的小伙伴更好的学习jquery。
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
JQuery实战第二讲 可以编辑的表格 dfdsfsfdsf
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
JQuery实现可编辑的表格JQuery实现可编辑的表格
JQuery_可以编辑的表格
jQuery实现可编辑化的表格,有兴趣的可以看看
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626