简单粗暴的table行编辑保存
Posted Joyce-Luo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单粗暴的table行编辑保存相关的知识，希望对你有一定的参考价值。
前段时间有人私信问“有没有点击编辑按钮相应的一行变成编辑状态”，最后交流了一会儿，只能写了一个简单的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>
</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),
edit_status = $this.attr('edit_status'),
status_value = edit_status && 1 == edit_status ? 0 : 1,
$td_arr = $this.parent().prevAll('td');
$this.val(1 == status_value ? 'complete' : 'edit').attr('edit_status', status_value);
$.each($td_arr, function()
var $td = $(this);
if(1 == status_value)
$td.html('<input type="text" value="'+$td.html()+'">');
else if(0 == status_value)
$td.html($td.find('input[type=text]').val());
);
);
)();
</script>
</html>效果也是我们想要的，至于美化神马的就用的时候来吧，Demo嘛，我这里就不讲究这么多了，祝想要的人你们成功！
就到这里结束吧，有什么疑问和需求请留言！！！感谢关注我的
以上是关于简单粗暴的table行编辑保存的主要内容，如果未能解决你的问题，请参考以下文章