HTML页面提交TABLE

短命女 2021-10-14 04:50 446阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读

相关 html表格在页面的位置,css Table布局-display:table

![4b215ca16c6f9985be43d24abc695ee6.png][] 使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。尽管反

怼烎@/ 2022年10月06日 03:57/ 0 赞/ 361 阅读

相关 HTML提交表单不跳转页面

<iframe width="0" height="0" name="actionframe"></iframe> <!--然后给表单设置target属性:--

拼搏现实的明天。/ 2022年08月12日 15:28/ 0 赞/ 310 阅读

相关 HTML同一个table中不同的按钮提交不同表单

> 在同一个页面的table中提交用不同的按钮提交不同的表单通常需要多个form，如果为了排版需要对齐不同的button，可以用table的tbody标签实现将tbo

左手的ㄟ右手/ 2022年07月15日 07:56/ 0 赞/ 280 阅读

相关 HTML05.Table

<html> <head> <meta charset="utf-8"> <title>TABLE表格的

约定不等于承诺〃/ 2022年06月01日 10:19/ 0 赞/ 146 阅读

相关 html —— table 标签与 display:table 样式

目录：一、table 相关标签介绍及使用二、div 布局设置display：table 一、table 相关标签介绍及使用相关标签按包含关

红太狼/ 2022年05月28日 07:26/ 0 赞/ 380 阅读

相关 HTML表格table

什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用div+css实现页面布局。如何创建HTML表格：H

淡淡的烟草味﹌/ 2022年05月15日 00:30/ 0 赞/ 399 阅读

相关 html页面引入其他html页面代码

{include file="/course/common/footer.html"} //注意路径书写方式用该语法可以引入公共html模板代码举例：

川长思鸟来/ 2022年02月04日 06:55/ 0 赞/ 463 阅读

相关 HTML页面提交TABLE

在HTML页面里，提交一个TABLE需要把TABLE的值传入变量或json格式，然后submit到服务端的。思路描述：将table里的值取出，放在json中，赋给一个in

短命女/ 2021年10月14日 04:50/ 0 赞/ 447 阅读

相关如何在Html页面点击按钮提交数据后防止回车被重复提交

前言：今天收到客户的一个奇怪BUG描述，事件描述大概如下： ![表单页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

小鱼儿/ 2021年10月14日 00:30/ 0 赞/ 938 阅读

相关 dwz问题之页面提交表单，仅局部刷新table表格

一、问题后台管理系统有一个页面，点击提交按钮提交表单时，页面整体都刷新了。原则上是提交表单后，表单信息保存原来的，只刷新表格。二、经过

约定不等于承诺〃/ 2021年09月15日 12:38/ 0 赞/ 513 阅读