JQuery经典小例子——可编辑的表格

时间:2022-08-09 18:03:37

可编辑的表格:

JQuery经典小例子——可编辑的表格

屏幕剪辑的捕获时间: 2015/8/14 9:16

HTML代码为:

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>JQuery实例二:可编辑的表格</title>
<link href="Edit.css"rel="stylesheet" /> <scriptsrc="jquery.js"></script>
<scriptsrc="edit.js"></script>
</head>
<body>
<table >
<thead >
<tr >
<thcolspan="2">鼠标点击表格项就可以编辑</th>
</tr>
</thead>
<tbody >
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>0001</td>
<td>张三</td>
</tr>
<tr>
<td>0002</td>
<td>李四</td>
</tr>
<tr>
<td>0003</td>
<td>王五</td>
</tr>
<tr>
<td>0004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
</body>
</html>

CSS代码为:

body {
}
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; }

JS文件:

//首先需要通过JS来解决内容部分奇偶行的背景色不同
//$(document).ready(function () { //});
$(function(){
//找到表格内容中除了第一个tr外所有的奇数行
$("tbody tr:even").css("background-color","#ECE9D8"); //需要找到所有的学号单元格
var numTd=$("tbody td:even");
//给这些单元格注册鼠标点击事件
//numTd.click(function(){
// //创建一个文本框
// var inputObj = $("<input type='text'>");
// //去掉文本框的边框
// inputObj.css("border-width","0");
// //设置文本框汇总给的文字字体大小是16px;
// inputObj.css("font-size", "16px"); // //找到当前鼠标点击的td,this 对应的就是响应click的那个td
// var tdObj = $(this);
// //使文本框的宽度和td的宽度相同
// inputObj.width(tdObj.width());
// //设置文本框的背景色
// inputObj.css("background-color", tdObj.css("background-color")); // //将当前td中的内容放到文本框中
// inputObj.val(tdObj.html()); // //清空td中的内容
// tdObj.html("");
// //将文本框插入td中
// inputObj.appendTo(tdObj); //另外一种精简的写法
numTd.click(function () { //找到当前鼠标低级的td,this对应的就是这个td
var tdObj = $(this);
if (tdObj.child("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按键确认操作
inputObj.keyup(function (event) {
//获取键值
var keycode = event.which;
//处理回车的情况
if (keycode == 13) {
//获取当前文本框中的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdObj.html(inputtext);
}
//处理ESC的情况
if (keycode == 27) { }
});
});
});

知识点小结:

1、$(function(){})是$(document).ready(function(){})的简化写法

2、$("tbodytr")可以返回tbody中的所有tr节点

3、$("tbodytr:even")可以返回tbody中所有索引值是偶数的tr节点。

4、CSS方法可以用于设定或获取节点的CSS属性。

5、JQuery的对象包含着选择器对应的DOM节点,以数组形式保存。

6、get方法可以获得JQuery对象中包含的某个DOM节点。

7、$()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象。

8、children方法可以获得某个节点的子节点,可以指定参数来限制子节点的内容

9、appendTo方法可以将一个节点追加到另一个节点的所有子节点的后面。

10、trigger方法可以出发某个JS的事件发生。

总结:

学到的知识,必须要用一下,纸上得来终觉浅(视频也不行),绝知此事要躬行!