jquery 获取Table 第一列作为key,正在编辑行作为Value放入数组

piaoxusi0005 2018-07-05 11:02:02
<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>第一</td>
<td>第二</td>
<td>第三</td>
<td>第四</td>
<td>编辑</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>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</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>

我的html 代码这样的,我点编辑按钮之后,再点击完成,把第一行作为key ,所编辑行相应存入对应的key,转化为json
...全文
124 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
piaoxusi0005 2018-07-05
  • 打赏
  • 举报
回复
需要考虑空值的情况,求助帮我补全一下代码

87,937

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧