可编辑表格部分
- 可以通过border-collapse: collapse这种方式来使表格中的单元格的边框合并。
- $(function(){})是$(document).ready(function(){})的简化写法
- $(“tbody tr”)可以返回tbody中的所有tr节点
- $(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点
- JQuery的对象内容包含着选择器对应的DOM节点,以数组形式保存
- get方法可以获得JQuery对象中包含的某一个DOM节点
- function中的this代表执行这个function的对象
- $()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象。
- children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。
- html方法可以设置或获取节点的HTML内容
- val方法可以获取或设置节点的value值
- $()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成JQuery对象
- trigger方法可以触发某个javascript的事件发生
JQuery中某个事件方法的参数function上可以定义一个event的参数,JQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象
- JQuery的event对象上有一个which的属性可以获得键盘按键的键值
- 13表示回车键,27表示ESC键
<style type="text/css">
table{
border: 1px solid black
border-collapse:collapse;
width:400px;
heigth:25px;
}
table th{
background-color:#00FF66;
border: 1px solid black
width:200px;
}
table td{
border: 1px solid black
width:200px;
}
</style>
<script>
$(function (){
var num = $("tbody tr:even")
num.css("background-color","#CCCF66");
var numtd= $("tbody td:even")
numtd.click(function(){
var tdthis=$(this);
var text = tdthis.html();
tdthis.html("");
var input = $("<input type='text'/>").css("border","0px")
.css("font-size","16px").width(tdthis.width()).height(tdthis.height())
.css("background-color",tdthis.css("background-color"))
.val(text).appendTo(tdthis);
input.click(function(){
return false;
});
//input.get(0).select();
input.trigger("focus").trigger("select");
});
});
</script>
<table width="400" border="1" cellspacing="0" cellpadding="0">
<thead>
<td colspan="2" align="center">标签点击表格就可以编辑</td>
</thead>
<tbody>
<tr>
<th>学好</th>
<th>姓名</th>
</tr>
<tr>
<td width="200px">1001</td>
<td>李刚</td>
</tr>
<tr>
<td width="200px">1002</td>
<td >张三</td>
</tr>
<tr>
<td width="200px">1003</td>
<td >李四</td>
</tr>
<tr>
<td width="200px">1004</td>
<td >王五</td>
</tr>
</tbody>
</table>
分享到:
相关推荐
jQuery实现可编辑化的表格,有兴趣的可以看看
JQuery实现可编辑的表格JQuery实现可编辑的表格
JQuery实战:可以编辑的表格 JQuery实战:可以编辑的表格
jquery 实现可编辑表格实例 ,jquery 实现可编辑表格实例
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
jQuery实现可编辑表格,支持IE、Firefox、Safari、chrome、Opera全部浏览器。
JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rarJQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar
JQuery实现的简单可编辑表格,其中的数据可以根据需要从数据里读取,这里暂时写成静态的,只是为了演示一下JQuery的方便之处。
用JQUERY实现可编辑表格。简单,实用
帮助初学jquery的小伙伴更好的学习jquery。
jquery可编辑表格代码实现
JQuery实战第二讲 可以编辑的表格 dfdsfsfdsf
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
Jquery实现表格的可编辑,可以随时改变表格中的内容并保存。
双击表格元素TD时,在其中嵌入INPUT对象并接收TD元素数据,进行编辑后失焦点时数据由INPUT对象回送到TD元素。
JQuery开发实战 可以编辑的表格 其中用到了JQuery Ajax Html等多种技术
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
JavaScript和jquery实战手册