HTML页面提交TABLE

最新推荐文章于 2023-03-27 22:48:55 发布

原创最新推荐文章于 2023-03-27 22:48:55 发布 · 6.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html

vue前端专栏收录该内容

62 篇文章

订阅专栏

本文介绍了如何在HTML页面中提交表格数据。通过将表格值转换为JSON格式，并存储在一个隐藏的input字段中，然后利用submit将数据发送到服务器，这种方法避免了大量单独的input元素。主要包括定义含有表格数据的HTML页面和获取表格数据的JavaScript代码步骤。

在HTML页面里，提交一个TABLE需要把TABLE的值传入变量或json格式，然后submit到服务端的。
思路描述：将table里的值取出，放在json中，赋给一个input，通过一个input来实现table表数据提交到服务器，就可以避免页面存在太多input框。
1.定义有table数据的html页面：

<!doctype html>
<html>
<head><title>table 表提交数据</title></head>
<body>
<div id="table-div">
<table id="table-batabase">
<tr><th>编号</th><th>名字</th><th>年龄</th><th>性别</th><th>爱好</th></tr>
<tr><td>1</td><td>小明</td><td>20</td><td>男</td><td>篮球</td></tr>
<tr><td>2</td><td>小猪</td><td>1</td><td>女</td><td>游泳</td></tr>
<tr><td>3</td><td>小狗</td><td>3</td><td>女</td><td>吃饭</td></tr>
</table>
</div>
<div id="dongzuo">
<form id="myform" action="test.php" method="post">
<input id="JSONText" name="jsontext" type="text" value=""/>
</form>
<button id="save-cookie">暂存</button><button id="save">提交</button>
</div>

2.定义获取table数据的js代码：

save.onclick = function(){
var tr;
var dataArray = new Array();
for(var i=1;i<table.rows.length;i++){
date = new Object();
tr = table.rows[i];
date.Code = tr.childNodes[0].innerHTML;
date.Name = tr.childNodes[1].innerHTML;
date.Age = tr.childNodes[2].innerHTML;
date.Sex = tr.childNodes[3].innerHTML;
date.Like = tr.childNodes[4].innerHTML;
//将table表对象转换成数组装成json放在数组里
dataArray.push(JSON.stringify(date));
}
//将数组装成json放在数组里
document.getElementById('JSONText').value = dataArray.toString();
myform.submit();
}