Skip to content

H
Html和javascript零散代码

Edward_555 / Html和javascript零散代码

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

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

提交 290e52e8 编写于 作者: Edward_555's avatar Edward_555
浏览文件
操作

html table重复表单组转json数组 

博客地址：https://blog.csdn.net/qq_24915489/article/details/109093937
上级 ce9e435f
隐藏空白更改
内联 并排
Showing with 116 addition and 0 deletion
table_data_2json.html 0 → 100644
浏览文件 @ 290e52e8
<!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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或