Jquery实现可以编辑的表格(x相应回车后修改ESC返回)(源码)

Jquery实现可以编辑的表格(回车后修改ESC返回)
一、jsp代码

<table>
<thead>
<tr>
<th colspan="2">Jquery实现可以编辑的表格(回车后修改ESC返回)</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>
<tr>
<td>0005</td>
<td>孙七</td>
</tr>
<tr>
<td>0006</td>
<td>周八</td>
</tr>

</tbody>
</table>

 

二 、css代码：

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

 
三、js代码：

$(document).ready(function(){
/*找到表格内容区所有的奇数行*/
/*使用even是为了通过tbody  tr 返回所有的tr元素 */
$("tbody tr:even").css("background-color","gray");
/*找到所有学号的单元格*/
var stuNo = $("tbody td:even");

/*给学号的这些单元添加鼠标点击事件  click事件*/
stuNo.click(function(){

//创建一个文本框
var inputObj = $("<input type='text'>");
//去掉文本框的边框
inputObj.css("border-width","0");
//设置文本框的字体的大小
inputObj.css("font-size","16px");
//找到当前鼠标点击事件的那个td
var tdObj = $(this);
//判断td里是否已经包含一个input了  如果不做判断  鼠标点击到  表格的线时  会出现bug
//因为td与文本框之间  还有一个间隔就是那条线  如果不小心点击到  就还会执行td的鼠标事件 
//如果td里已经有文本框  就不对鼠标事件  起作用
if(tdObj.children("input").length > 0){
return false;
}
//
var text = tdObj.html();
//将文本框的宽度和td相同
inputObj.width(tdObj.width());
//设置文本框的背景颜色和当前td一一致
inputObj.css("background-color",tdObj.css("background-color"));
//将当前td的内容设置到文本框中
inputObj.val(text);
//清空td的内容
tdObj.html("");
//将文本框插入到当前点击的那个td中
inputObj.appendTo(tdObj);
//点击td之后  变成文本框之后会默认
inputObj.trigger("select");

//将文本框插入之后 再点击是不会在默认是td的鼠标事件
inputObj.click(function(){
return false;
});

//处理文本框上回车和ESC操作
inputObj.keyup(function(event){
//获取当前按下键盘的减值event.which
var keyCode = event.which;
//操作回车情况
if(keyCode == 13){
//获取文本框的value
var inpueValue = inputObj.val();
//把获取的文本框的值设置到td中去
tdObj.html(inpueValue);
}
//操作ESC情况
if(keyCode == 27){
//把当前td的值继续设置进去
tdObj.html(text);
}

});
});
});