JavaScrpit-table提交单独行

最近在写后台开发的时候遇见一个小问题，可以说很苦恼了，主要是对前端开发不熟，尤其是DOM的操作还有动态绑定事件、提交操作，就是前端GET到一串JSON动态生成了一个table表，然后点击一个编辑按钮或者链接，解锁这一行，然后用户修改这一行，点击提交完成POST。功能很好描述，但是实际上要分为以下两步：

（1）选中哪一行就要把哪一行的tb里面加入input标签，然后input标签的value赋值原来的值

（2）点击提交后获取该行每一个input值，与数据库里的字段一一对应，然后提交

效果如图：

我操作这个table的时候耗费了很多脑细胞，而且现在再让我操作这样的表单提交，我都很恐惧，因为我写的代码真的很烧脑。我实现的思路是在table加入了一个ID，写了一个函数，当动态生成的时候，给最右边的编辑加上一个onlcik函数，只传一个值，传这是第几行，比如这是第二行changeToInputA(2)就是传2，然后这个函数，会用table的ID获取到整个table，一行行算table之后，定位到这一行，给这一行加入input，并把原来的“编辑”替换为“完成”，给完成标签加上一个onlick函数，点击完成时，提交该行输入的内容，效果是可以实现，但是过程非常曲折，因为整个函数只获得了第几行的编号这一个值，然后table根据ID获取整个table才进行计算，非常艰辛了。

看代码吧：

$(function(){	var getAddressOtUrl='/enterpriseportal/frontend/getaddressot';//分公司
	var getAddressUrl='/enterpriseportal/frontend/getaddress?addid=';//主公司
	var outHtml1='编号名称地址联系人电话编辑';	var outHtml2='';
	$.getJSON(getAddressOtUrl,function(data){		var newsObj=data.addList;		var numa=1;
		newsObj.map(function(item,data){
			outHtml2+=''+numa+''+item.addName+''+item.addContent+''+item.addPhoneOwner+''+item.addPhoneNumber+'     编辑';
			numa++;
		});//
		$('#hr-part').html(outHtml1+outHtml2);
		$('#func-tab').html('
新增地址
');
	});
})function changeToInput(id){
	id=id+1;	var ROW_NUM=4;			var oneRow=document.getElementById('hr-part').rows[id].cells;			var b=(id-2)*ROW_NUM+1;			var updateAddressUrl='/enterpriseportal/addresscc/updateadress';			for(var a=0;a';
			}
			oneRow[oneRow.length-1].innerHTML='完成';			document.getElementById('finish'+id).onclick=function(){				var fixNum=(id-2)*4+1;				var formData=new FormData();				for(var d=1;d<5;d++){					var tmpC=document.getElementById('upTableRow'+fixNum).value;
					formData.append('inputC'+d,tmpC);
					fixNum++;
				}
				formData.append('id',id+2);//当前分公司地址前面还有三条信息
				$.ajax({					url : updateAddressUrl,					type : 'POST',					data : formData,					contentType : false,					processData : false,					cache : false,					success : function(data) {
						self.location='/enterpriseportal/cps/joinusadmin';
					}
				});
			   }
		}

	
	
}

效果虽然实现了，我个人觉得不是很优雅规范，我会想办法改进的。