From 290e52e8b0f41a3c21a0d9d61c9f42335e62c733 Mon Sep 17 00:00:00 2001
From: Edward_555 <283124296@qq.com>
Date: Thu, 15 Oct 2020 16:47:59 +0800
Subject: [PATCH] =?UTF-8?q?html=20table=E9=87=8D=E5=A4=8D=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E7=BB=84=E8=BD=ACjson=E6=95=B0=E7=BB=84=20=E5=8D=9A?=
 =?UTF-8?q?=E5=AE=A2=E5=9C=B0=E5=9D=80=EF=BC=9Ahttps://blog.csdn.net/qq=5F?=
 =?UTF-8?q?24915489/article/details/109093937?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 table_data_2json.html | 116 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 table_data_2json.html
diff --git a/table_data_2json.html b/table_data_2json.html
new file mode 100644
index 0000000..c3cb4c2
--- /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
-- 
GitLab

