diff --git a/table_data_2json.html b/table_data_2json.html
new file mode 100644
index 0000000000000000000000000000000000000000..c3cb4c2a08b9a6c1ac21ebf115aeea3793ef2336
--- /dev/null
+++ b/table_data_2json.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Table重复表单组元素转json数据</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
+</head>
+<body  >
+    <table border="1" id="mytable" cellspacing="0">
+		<tbody id="mytable_tbody">
+		  <tr class="table_main_value">
+			<td colspan="2">录入人：</td>
+			<td colspan="3"> <input name="admin"  type="text" > </td>
+		  </tr>
+		  <tr class="table_main_value">
+			<td colspan="2">录入时间：</td>
+			<td colspan="3"> <input name="time"  type="text" > </td>
+		  </tr>
+		  <tr>
+			<th>标题</th>
+			<th>简介</th>
+			<th>价格</th>
+			<th>类型</th>
+			<th></th>
+		  </tr>
+		  <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>
+		</tbody>
+	</table>
+    <button type="button" onclick="addTable()">添加一行</button>
+	<br><br><br>
+	<button type="button" onclick="DelAll()">清空内容</button>
+	<br><br><br>
+	<button type="button" onclick="getData()">获取元素</button>
+    <script>
+        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',JSON.stringify(formdata));
+		}
+		
+    </script>
+    <script>
+    /*添加新一栏*/
+    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();  
+	}
+	/*清空所有内容*/
+    function DelAll(obj){
+        $('tr[class^="table_main_value"]').each(function(){
+			//获取所有input
+			$(this).find("input[type='text']").each(function(){
+			  $(this).val("");
+			});
+		}); 
+	$('tr[class^="table_group_value"]').each(function(){
+		$(this).remove();
+	})		
+	}
+    </script>
+</body>
+
+</html>
\ No newline at end of file
