jQuery实现可编辑表格

来源：互联网发布：mac java安装到哪里了编辑：程序博客网时间：2024/05/16 08:54

周末无事，看视频自学jquery,本周实现可编辑表格

1，html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>editTable</title><meta http-equiv="Content-Type" content="text/html;charset=gb2312"><link type="text/css" rel="stylesheet" href="css/editTable.css" /><script type="text/javascript" src="js/jquery.min.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>000</td><td>赵小</td></tr><tr><td>001</td><td>王小</td></tr><tr><td>002</td><td>李小</td></tr><tr><td>003</td><td>张小</td></tr></tbody></table></body></html>

2，css文件控制html样式

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

3，js文件，包括用到的jquery.min.js文件和实现功能的js文件

$(function(){//找到表格内容区域中除第一个tr以外的所有奇数行$("tbody tr:even").css("background-color","#ECE9D8");var numId=$("tbody td:even");numId.click(function(){var tdObj=$(this);if(tdObj.children("input").length>0){return false;}var text=tdObj.html();tdObj.html("");var inputObj=$("<input type='text'>").css("border","0").css("font-size","16px").width(tdObj.width());inputObj.css("background-color",tdObj.css("background-color")).val(tdObj.html()).appendTo(tdObj);inputObj.val(text);inputObj.trigger("focus").trigger("select");//高亮inputObj.click(function(){return false;});//esc  enterinputObj.keyup(function(event){var keycode=event.which();if(keycode==13){var inputtext=$this.val();tdObj.html(inputtext);}if(keycode==27){tdOjb.html(text);}});});});

4，感谢视频的上传者，感谢主讲老师。我会继续努力,变得更好。

5,下载地址：http://download.csdn.net/detail/handaoyaosi/6718453

0 0