51,410
社区成员
发帖
与我相关
我的任务
分享对表格进行编辑和删除
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; font-size:14px}
#box{ width:500px; margin:100px auto}
table,th,td{ border:1px solid #000; border-collapse:collapse}
td,th{ width:100px; height:30px; padding:10px}
input{ display:none; height:24px; width:60px; border:1px solid #ccc;}
.editBtn{ color:#666}
.delBtn{ color:red}
.okBtn,.cancelBtn{ display:none}
.edit span{ display:none}
.edit input{ display:inline-block}
.edit .editBtn,.edit .delBtn{ display:none}
.edit .okBtn,.edit .cancelBtn{ display:inline}
</style>
</head>
<body>
<div id="box">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>编辑</th>
</tr>
<tr>
<td><span>张三</span><input type="text"></td>
<td><span>18</span><input type="text"></td>
<td><span>北京</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><span>李四</span><input type="text"></td>
<td><span>25</span><input type="text"></td>
<td><span>上海</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><span>小强</span><input type="text"></td>
<td><span>22</span><input type="text"></td>
<td><span>广州</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><span>小明</span><input type="text"></td>
<td><span>16</span><input type="text"></td>
<td><span>深圳</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; font-size:14px}
#box{ width:500px; margin:100px auto}
table,th,td{ border:1px solid #000; border-collapse:collapse}
td,th{ width:100px; height:30px; padding:10px}
input{ display:none; height:24px; width:60px; border:1px solid #ccc;}
.editBtn{ color:#666}
.delBtn{ color:red}
.okBtn,.cancelBtn{ display:none}
.edit span{ display:none}
.edit input{ display:inline-block}
.edit .editBtn,.edit .delBtn{ display:none}
.edit .okBtn,.edit .cancelBtn{ display:inline}
</style>
</head>
<body>
<div id="box">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>编辑</th>
</tr>
<tr>
<td><span>张三</span><input type="text"></td>
<td><span>18</span><input type="text"></td>
<td><span>北京</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><span>李四</span><input type="text"></td>
<td><span>25</span><input type="text"></td>
<td><span>上海</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><span>小强</span><input type="text"></td>
<td><span>22</span><input type="text"></td>
<td><span>广州</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
<tr>
<td><span>小明</span><input type="text"></td>
<td><span>16</span><input type="text"></td>
<td><span>深圳</span><input type="text"></td>
<td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
</tr>
</table>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
