jQuery是个非常好的ajax框架。下面是由jQuery实现的可编辑的表格。
实现原理:就是在要单击<td></td>中插入<input type="text"/>,并让的边框设置为0,宽度、背景色和td的宽度一致。
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:#3e6a5f;
}
/*指页面上文档内容装载完成以后执行的方法*/ //$(document).ready(function(){ //}); //上面的方法等价于 $(function(){ //标签选择器 odd表示奇数,even表示偶数 //选择tbody中所有偶数行tr元素找出来 $("tbody tr:even").css("background-color","#ECE9D8"); //$("tbody td:even").css("background-color","white"); var numId=$("tbody td:even"); numId.click(function(){ //创建一个文本框 var inputobj=$("<input type='text'>"); inputobj.css("border-width","0"); var tdobj=$(this); //查看td 中是否含有input元素,如果有就不执行click事件 if(tdobj.children("input").length>0){ return false; } inputobj.css("font-size",tdobj.css("font-size")); inputobj.css("background-color",tdobj.css("background-color")); inputobj.width(tdobj.width()); //将html值设进input text中 var text=tdobj.html(); inputobj.val(text); //inputobj.get(0).select(); //将td中内容清空 tdobj.html(""); //将input 添加到td中 inputobj.appendTo(tdobj); //触发 input JavaScript focus 事件和select事件 inputobj.trigger("focus").trigger("select"); // inputobj.click(function(){ // return false; // }); //input 键盘事件 inputobj.keyup(function(event){ var keycode=event.which; //13表示键盘上的回车键 if(keycode==13){ var inputtext=$(this).val(); tdobj.html(inputtext); } //27表示键盘上的esc键 if(keycode==27){ tdobj.html(text); } }); }); });
<html>
<head>
<title>JQuery实例2:可以编辑表格</title>
<link type="text/css" rel="stylesheet" href="css/editTable.css"></link>
<script type="text/javascript" src="js/jquery-1.3.1.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>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>