JavaScrpit-table提交单独行

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

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

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

效果如图：

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

看代码吧：

/**
 * caeser
 * 20190409
 */
$(function(){
	var getAddressOtUrl='/enterpriseportal/frontend/getaddressot';//分公司
	var getAddressUrl='/enterpriseportal/frontend/getaddress?addid=';//主公司
	var outHtml1='<tr><th>编号</th><th>名称</th><th>地址</th><th>联系人</th><th>电话</th><th>编辑</th></tr><tr>';
	var outHtml2='';
	$.getJSON(getAddressOtUrl,function(data){
		var newsObj=data.addList;
		var numa=1;
		newsObj.map(function(item,data){
			outHtml2+='<tr><td>'+numa+'</td><td>'+item.addName+'</td><td>'+item.addContent+'</td><td>'+item.addPhoneOwner+'</td><td>'+item.addPhoneNumber+'</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="changeToInput('+numa+')" >编辑</a></td></tr>';
			numa++;
		});//
		$('#hr-part').html(outHtml1+outHtml2);
		$('#func-tab').html('<div class="blue"><div id="slatenav"><ul><li><a href="#" >新增地址</a></li></ul></div></div>');
	});
})
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.length-2;a++){
				var inputHtmlLength='80px';
				if((a+1)==2){
					inputHtmlLength='230px';
				}
				oneRow[a+1].innerHTML='<input value="'+oneRow[a+1].innerHTML+'" style="width:'+inputHtmlLength+'" id="upTableRow'+(b++)+'" type="text">';
			}
			oneRow[oneRow.length-1].innerHTML='<a href="#" id="finish'+id+'" >完成</a>';
			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';
					}
				});
			   }
		}

	
	
}

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