php可编辑表格实例,jQuery做出可编辑表格（附代码）

这次给大家带来jQuery做出可编辑表格(附代码)，jQuery做出可编辑表格的注意事项有哪些，下面就是实战案例，一起来看一下。

/p>

jq2—可以编辑的表格

--%>

鼠标点击表格项就可以编辑

学号姓名000001张三000002李四000003王五000004赵六

css代码：body {

}

table {

border:1px solid #000000;

border-collapse:collapse;/*单元格边框合并*/

width:400px;

}

table td {

border:1px solid #000000;

width:50%;

}

table th {

border:1px solid #000000;

width:50%;

}

tbody th {

background-color:#426fae;

}

jquery代码$(function () {

//找到表格中除了第一个tr以外的所有偶数行

//使用even为了通过tbody tr返回所有tr元素

$("tbody tr:even").css("background-color", "#ece9d8");

//找到所有的学号单元格

var numId = $("tbody td:even");

//给单元格注册鼠标点击事件

numId.click(function () {

//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td

var tdObj = $(this);

//判断td中是否有文本框

if (tdObj.children("input").length>0) {

return false;

}

//获取表格中的内容

var text = tdObj.html();

//清空td中的内容

tdObj.html("");

//创建文本框

//去掉文本框的边框

//设置文本框中字体与表格中的文字大小相同。

//设置文本框的背景颜色与表格的背景颜色一样

//是文本框的宽度和td的宽度相同

//并将td中值放入文本框中

//将文本框插入到td中

var inputObj = $("").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).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) {

//将td中的内容还原成原来的内容

tdObj.html(text);

}

});

});

});

总结：通过这一实例的学习能获得的知识点：

一、html方面

1.table中可以包含thead和tbody

2.表头的内容中可以放th中

3.table{}这种写法称作标签选择器，可以对整个table产生影响。

4.table td{}这种写法表示table中包含的所有td。

二、jquery方面

$()的括号中可以放4种不同的参数

1.参数直接放function,表示页面加载完毕：例如上述例子中jquery代码中的第1行$(function(){})

2.参数可以是css类选择器，并被包装成一个jquery对象。例如：上述例子中jquery代码的第4行$(“tbody tr:even”)

3.参数如果是html文本，可以创建dom节点，并包装成jquery对象。例如：上述例子中jquery代码的第27行$("")

4.参数可以是一个dom对象，这个方法相当于吧dom对象装换成jquery对象。上述例子中jquery代码的第11行var tdObj = $(this)

本例子中的jquery对象

1.jquery对象后面加css属性，可以设置节点的css属性。例如上述例子中jquery代码中的第4行$("tbody tr:even").css("background-color", "#ece9d8");

2.jquery对象内容中包含了选择器对应的dom节点，以数组保存。

3.jquery对象后面加html方法可以设置或获取节点的html内容。例如上述例子中jquery代码中的第17行var text = tdObj.html()

4.jquery对象后面加val方法，可以获取或设置节点的value值。例如上述例子中jquery代码中第41行var inputtext = $(this).val()

5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()

6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)

7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")

8.jquery对象后面加children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length

9.如果选择器返回的jquery对象中包含多个dom节点，在这个对象上注册类似click事件，所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click；

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：