html table重复表单组转json数组

最近遇到个需求，需要录入相同类型数据多组，并提交给后台，并且需要动态添加组数据（如图），开始采用form表单形式，但每组数据的name属性形同，导致form数组获取异常。

动态添加删除数据容易实现，在动态添加元素时，每组tr应有相同的class或者以数字结尾的自增id，以确保后期可通过该属性获取组元素，代码如下：

/*添加新一栏*/
    function addTable(){
        var trHTML ="";
        trHTML += '<tr class="table_group_value">'
			+'<td> <input name="title" type="text" > </td>'
			+'<td> <textarea name="desc" type="text" ></textarea> </td>'
			+'<td> <input name="price" type="text" > </td>'
			+'<td> <select name="style"><option value="novel">小说</option> <option value="fiction">科幻</option> </select> </td>'
			+'<td> <button type="button" onclick="delTable(this)">移除</button> </td>'
		  +'</tr>';
        $("#mytable_tbody").append(trHTML); //在表之后添加空白行   
      }
	  
	  /*删除一栏*/
    function delTable(obj){
        $(obj).parent().parent().remove();  
	}

获取数据未采用form格式，而是通过jquery选择器和 find函数实现，

1.先通过Jquery选择器获取每组的tr，并在循环内创建每组数据的json对象。

2.通过find函数遍历当前tr内指定的表单元素，本文例子中有input，textarea，select。

3.通过attr函数获取表单元素的name和值，并将数据加入到json对象中。

4.将每组json对象加入到json数组中。

代码如下：

function getData() {
			//重复表单元素
			var formdata={};
            var arr_sub_form = [];//重复子数据列表
            //遍历含有主数据的tr ***核心重点***
			//也可使用id，但每个tr的id必须以自增数字结尾 如 id=mytr0,mytr1,mytr2...，//$('tr[id^="mytr"]').each(function(){
            $('tr[class^="table_group_value"]').each(function(){
				var form_sub_data = {};
				//获取所有input
                $(this).find("input[type='text']").each(function(){
                  form_sub_data[$(this).attr("name")]=$(this).val();
                });
				//获取所有select
				$(this).find("select").each(function(){
                  form_sub_data[$(this).attr("name")]=$(this).val();
                });
				//获取所有textarea
				$(this).find("textarea[type='text']").each(function(){
                  form_sub_data[$(this).attr("name")]=$(this).val();
                });
				arr_sub_form.push(form_sub_data);
            });
			formdata['sub_data']=arr_sub_form;
			
			//非重复表单元素
			var arr_main_form = [];//非重复数据列表
			var form_main_data = {};
			$('tr[class^="table_main_value"]').each(function(){
				//获取所有input
                $(this).find("input[type='text']").each(function(){
                  form_main_data[$(this).attr("name")]=$(this).val();
                });
            });
			arr_main_form.push(form_main_data);
			formdata['main_data']=arr_main_form;
            console.log('formdata',formdata);
		}

本文同时将表内非重复元素也添加到json中，整个json分为非重复数据（整表信息），重复类型数据（每组表数据）。

演示及最终结果如下：

{
    "sub_data": [
        {
            "title": "java", 
            "price": "12", 
            "style": "novel", 
            "desc": "java知识"
        }, 
        {...}, 
        {
            "title": "C++", 
            "price": "15", 
            "style": "novel", 
            "desc": "C++"
        }
    ], 
    "main_data": [
        {
            "admin": "张三", 
            "time": "周一"
        }
    ]
}

当然还有其他办法，暂未细查。

添加了清空按钮：

源码：https://codechina.csdn.net/qq_24915489/html/-/blob/290e52e8b0f41a3c21a0d9d61c9f42335e62c733/table_data_2json.html