table行编辑
2024-09-01 00:46:55
一个简单的Demo
<html>
<head>
<title>Table Test Demo</title>
<style>
.view_table {
width:800px;
height:auto;
margin:0px auto;
} .view_table table {
width: 100%;
font-size: 12px;
font-family: "Microsoft YaHei" !important;
text-align: center;
} .view_table table tr td {
border: 1px green solid;
background-color: #cccccc;
line-height: 30px;
width: 80px;
}
</style>
</head>
<body>
<div class="view_table" name="viewTab">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
</table>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
(function(){
$('input[type="button"]').on('click', function(){
var $this = $(this),
$td_arr = $this.parent().html('complete').prevAll('td');
$.each($td_arr, function(){
var $td = $(this);
$td.html('<input type="text" value="'+$td.html()+'">');
});
});
})();
</script>
</html>
最新文章
- 转载---ViewPager，PagerAdapter，FragmentPagerAdapter和FragmentStatePagerAdapter的分析对比
- MVC5+EF6 Code First 从零开始——第一章
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
- mysql php query steps
- C# 调用 C++ dll (类型对照）
- ganglia监控hadoop2.0配置方法
- C# 5.0 TAP 模式下的HTTP Get和Post
- netbeans下将全部jar包打成一个，俗称fat jar
- Windebug双机调试环境搭建
- squashfs文件系统
- CentOS随笔——Service与防火墙关闭
- 谷歌AI涉足艺术、太空、外科手术，再强调AI七原则
- Python开发【字符串格式化篇】
- 大雄的elk实践
- 内置---排序(sorted)
- max_allowed_packet引起同步报错处理
- ECR是什么意思
- Redis安装异常解决办法
- Python基础 - eazy_install和pip源设置
- C错误异常处理,异常处理