jquery动态编辑表格

最新推荐文章于 2022-03-23 17:41:25 发布

huiccsu525

最新推荐文章于 2022-03-23 17:41:25 发布

阅读量163

点赞数

文章标签： jQuery CSS HTML ViewUI

本文链接：https://blog.csdn.net/huiccsu525/article/details/83740836

版权

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文件放在同一目录下。

huiccsu525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery动态编辑表格

html代码：[table] table { border: 1px solid black; border-collapse: collapse; width: 400px;}table td { border: 1px solid black; width: 50%;}table th { bord...
复制链接

扫一扫