简单粗暴的table行编辑保存

来源：互联网发布：大数据热门新闻编辑：程序博客网时间：2024/05/17 03:38

前段时间有人私信问“有没有点击编辑按钮相应的一行变成编辑状态”，最后交流了一会儿，只能写了一个简单的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嘛，我这里就不讲究这么多了，祝想要的人你们成功！

就到这里结束吧，有什么疑问和需求请留言！！！感谢关注我的

5 0