Skip to content

H
Html和javascript零散代码

happyqiangsir / Html和javascript零散代码
与 Fork 源项目一致

Fork自 Edward_555 / Html和javascript零散代码

通知 2
Star 0
Fork 0
H
Html和javascript零散代码

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
table_data_2json.html 4.1 KB
Newer Older
Edward_555's avatar
html table重复表单组转json数组  
Edward_555 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 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>