Js实现Table表格动态修改删除数据的代码javascript
演示效果：
说明：
Js实现Table表格动态修改删除数据的代码，自己弄的，觉得挺简单，有需要的可以拿去修改完善，我觉得是一个不错的Ajax操作体验，为学习Ajax的朋友提供一份参考吧。
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js实现Table表格动态修改删除数据</title>
</head>
<style type="text/css">
.gy{background:#CAF4EC;}
table{font-size:12px;}
table input{border:#d6d6d6 1px solid; text-indent:5px;}
</style>
<body>
<table width="634" border="0" cellspacing="0" class="table">
<tr>
<td width="418">文章标题</td>
<td width="104" align="center">创建时间</td>
<td width="98" align="center">操作</td>
</tr>
<tr>
<td height="25"><span>2011</span></td>
<td height="25" align="center">2011-12-15</td>
<td height="25" align="center" class="posttype"><a href="javascript:" class="update">修改</a> | <a href="javascript:" class="del">删除</a></td>
</tr>
<tr>
<td height="25"><span>2012</span></td>
<td height="25" align="center">2011-12-15</td>
<td height="25" align="center" class="posttype"><a href="javascript:" class="update">修改</a> | <a href="javascript:" class="del">删除</a></td>
</tr>
<tr>
<td height="25"><span>2013</span></td>
<td height="25" align="center">2011-12-15</td>
<td height="25" align="center" class="posttype"><a href="javascript:" class="update">修改</a> | <a href="javascript:" class="del">删除</a></td>
</tr>
<tr>
<td height="25"><span>2014</span></td>
<td height="25" align="center">2011-12-15</td>
<td height="25" align="center" class="posttype"><a href="javascript:" class="update">修改</a> | <a href="javascript:" class="del">删除</a></td>
</tr>
<tr>
<td height="25"><span>2015</span></td>
<td height="25" align="center">2011-12-15</td>
<td height="25" align="center" class="posttype"><a href="javascript:" class="update">修改</a> | <a href="javascript:" class="del">删除</a></td>
</tr>
<tr>
<td height="25"><span>2016</span></td>
<td height="25" align="center">2011-12-15</td>
<td height="25" align="center" class="posttype"><a href="javascript:" class="update">修改</a> | <a href="javascript:" class="del">删除</a></td>
</tr>
</table>
</body>
<script src="http://w3school.com.cn/jquery/jquery.js"></script>
<script>
$(function(){
// 修改操作
$('.update').live('click', function(){
var s = $(this).parent().parent().find("span").text();
$(this).parent().parent().find("span").html("<input type=text value="+s+">");
$(this).parent().html("<a href=javascript: class=save>保存</a>")
});
// 保存操作
$('.save').live('click', function(){
var k = $(this).parent().parent().find("span input").val();
$(this).parent().parent().find("span").html(k);
$(this).parent().html("<a href=javascript: class=update>修改</a> | <a href=javascript: class=del>删除</a>")
});
// 删除操作
$('.del').live('click', function(){
$(this).parent().parent().remove();
});
});
</script>
</html>
上一篇：一个最简单的联动菜单代码
下一篇：检查多选框选择个数
我要评论