html代码:
[table]
<!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>
[/table]
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文件放在同一目录下。
[table]
<!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>
[/table]
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文件放在同一目录下。