HTML页面提交TABLE

在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();
}

HTML页面提交TABLE相关推荐

页面提交处理时候显示“正在处理，请稍后……”，防止二次提交功能。
1.Ajax实现页面提交处理时候显示"正在处理,请稍后--",防止二次提交功能. 在后台处理事件代码中添加: System.Threading.Thread.Sleep(1000 ...
使用Cross-Page Postback(跨页面提交)在页面间传递数据
页面间传递数据的几种方法在页面间传递数据时,我们有以下几种选择: 1.Query String 一个很常见的方法,Query String是URL中问号之后的那一部分.其优点在于它是轻量级的,不会给 ...
.jsp页面提交form表单，后台却无法获取input文本框value值
问题一:奇葩bug总结:input提交,后端获取不到value问题注意: java后端jsp页面input disabled="disabled"表单提交,后端无法print获取 ...
java antd实现登录,AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
ASP.NET 2.0中的跨页面提交
简介在ASP.NET 1.X 版本中,页面都是提交到自己本身,并不能方便的指定需要提交的目的页面.例如FirstPage.aspx中的button只能提交到FirstPage.aspx,而不能提交到 ...
ASP.NET 2.0中实现跨页面提交
ASP.NET 2.0中实现跨页面提交在ASP.NET 1.X 版本中,页面都是提交到自己本身,并不能方便的指定需要提交的目的页面.例如FirstPage.aspx中的button只能提交到Firs ...
java list数据的更新_新增页面提交数据 list页面没有更新数据
工作共遇到一个问题 ,新增页面提交数据 list页面没有更新数据,需要手动刷新数据才会提交展示出来.在页面试过很多刷新的方法都不是很好使,求大神解答.代码如下: add:的页面代码 rel=" ...
Jquery导出页面表格table的内容为Excel，PDF，DOC格式
Jquery导出页面表格table的内容为Excel,PDF,DOC格式文档地址:http://www.jqueryfuns.com/resource/2381 1.引入jquery的js–这里就不 ...
微信h5页面提交表单后返回键重复提交的问题
微信h5页面提交表单后返回键重复提交的问题问题描述:h5表单提交保存成功之后,手机返回后原来的页面还能提交表单. 示例: mui.post('savexxxx',data,function(res) ...

HTML页面提交TABLE

HTML页面提交TABLE相关推荐

最新文章

热门文章