jquery动态编辑表格
html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/edittable.js"></script> <style type="text/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: #37AAC9; }</style> </head> <body> <table> <thead> <tr> <td colspan="2"> 各个地区 </td> </tr> </thead> <tbody> <tr> <th>编号</th> <th> 省份 </th> </tr> <tr> <td>000002</td> <td> 湖北 </td> </tr> <tr> <td>000003</td> <td> 河南 </td> </tr> <tr> <td>000004</td> <td> 河北 </td> </tr> <tr> <td>000005</td> <td> 山东 </td> </tr> </tbody> </table> </body></html>
edittable.js 代码：
$(function()
{
$("tbody tr:even").css("background-color","#C9EBFF");
var numId = $("tbody td:even");
numId.click(function()
{
var tdObj = $(this);
if(tdObj.children("input").length>0)
{
return false;
}
var textObj = $("<input type='text'>");
textObj.css("border-width","0").width(tdObj.width()).css("font-size","16px");
textObj.val(tdObj.html());
tdObj.html("");
textObj.appendTo(tdObj);
//textObj.get(0).select();
textObj.trigger("focus").trigger("select");
textObj.click(function()
{
return false;
});
//alert(tdObj.html());
//处理文本框上回车操作和esc按键操作
var temVal = textObj.val();
textObj.keyup(function(event)
{
var keycode=event.which;
//alert(keycode);
//如果是“enter”键，就保存值
if(keycode==13)
{
var textValue = $(this).val();
tdObj.html(textValue);
}
//如果是“esc”按就撤销
if(keycode==27)
{
tdObj.html(temVal);
}
}
);
});
});
另jquery-1.4.2.js跟edittable.js文件放在同一目录下。
edittable.js 代码：
$(function()
{
$("tbody tr:even").css("background-color","#C9EBFF");
var numId = $("tbody td:even");
numId.click(function()
{
var tdObj = $(this);
if(tdObj.children("input").length>0)
{
return false;
}
var textObj = $("<input type='text'>");
textObj.css("border-width","0").width(tdObj.width()).css("font-size","16px");
textObj.val(tdObj.html());
tdObj.html("");
textObj.appendTo(tdObj);
//textObj.get(0).select();
textObj.trigger("focus").trigger("select");
textObj.click(function()
{
return false;
});
//alert(tdObj.html());
//处理文本框上回车操作和esc按键操作
var temVal = textObj.val();
textObj.keyup(function(event)
{
var keycode=event.which;
//alert(keycode);
//如果是“enter”键，就保存值
if(keycode==13)
{
var textValue = $(this).val();
tdObj.html(textValue);
}
//如果是“esc”按就撤销
if(keycode==27)
{
tdObj.html(temVal);
}
}
);
});
});
另jquery-1.4.2.js跟edittable.js文件放在同一目录下。