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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249926.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249926.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249926.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

生成條形碼

https://packagist.org/packages/picqer/php-barcode-generator轉載于:https://www.cnblogs.com/pansidong/p/9334224.html

3.GDScript(1)概覽

GDScript 是上面提到的用于Godot的主要語言。和其他語言相比&#xff0c;它與Godot高度整合&#xff0c;有許多優點&#xff1a; 簡單&#xff0c;優雅&#xff0c;設計上為Lua、Python、Squirrel等語言用戶所熟悉。加載和編譯速度飛快。編輯器集成非常令人愉快&#xff0c;有節…

Web 前端框架分類解讀

Web前端框架可以分為兩類&#xff1a; JS的類庫框架 JQuery.JS Angular.JS&#xff08;模型&#xff0c; scope作用域&#xff0c;controller&#xff0c;依賴注入&#xff0c;MVVM&#xff09;&#xff1a;前端MVC Vue.JS&#xff08;MVVM&#xff09;***** Reat.JS &…

async / await對異步的處理

雖然co是社區里面的優秀異步解決方案&#xff0c;但是并不是語言標準&#xff0c;只是一個過渡方案。ES7語言層面提供async / await去解決語言層面的難題。目前async / await 在 IE edge中已經可以直接使用了&#xff0c;但是chrome和Node.js還沒有支持。幸運的是&#xff0c;b…

《SQL Server 2008從入門到精通》--20180717

目錄 1.觸發器1.1.DDL觸發器1.2.DML觸發器1.3.創建觸發器1.3.1.創建DML觸發器1.3.2.創建DDL觸發器1.3.3.嵌套觸發器1.3.4.遞歸觸發器1.4.管理觸發器1.觸發器 觸發器是一種特殊的存儲過程&#xff0c;與表緊密關聯。 1.1.DDL觸發器 當服務器或數據庫中發生數據定義語言&#xff…

主成分分析原理解釋(能力工場小馬哥)

主成分分析&#xff08;Principal components analysis&#xff09;-最大方差解釋 在這一篇之前的內容是《Factor Analysis》&#xff0c;由于非常理論&#xff0c;打算學完整個課程后再寫。在寫這篇之前&#xff0c;我閱讀了PCA、SVD和LDA。這幾個模型相近&#xff0c;卻都有自…

div/div作用

<div></div>主要是用來設置涵蓋一個區塊為主&#xff0c;所謂的區塊是包含一行以上的數據&#xff0c;所以在<div></div>的開始之前與結束后&#xff0c;瀏覽都會自動換行&#xff0c;所以夾在<div></div>間的數據&#xff0c;自然會與其前…

路由懶加載優化

首先得需要插件支持&#xff1a;syntax-dynamic-import import Vue from vue import VueRouter from vue-router /*import First from /components/First import Second from /components/Second*/Vue.use(VueRouter) //方案1 const first ()>import(/* webpackChunkName: &…

vue全面介紹--全家桶、項目實例

簡介 “簡單卻不失優雅&#xff0c;小巧而不乏大匠”。 2016年最火的前端框架當屬Vue.js了&#xff0c;很多使用過vue的程序員這樣評價它&#xff0c;“vue.js兼具angular.js和react.js的優點&#xff0c;并剔除了它們的缺點”。授予了這么高的評價的vue.js&#xff0c;也是開…

關于Keychain

1、Keychain 淺析 2、iOS的密碼管理系統 Keychain的介紹和使用 3.iOS開發中&#xff0c;唯一標識的解決方案之keyChainUUID 轉載于:https://www.cnblogs.com/KiVen2015/p/9341224.html

算法群模擬面試記錄

第一場&#xff1a;2018年12月30日&#xff08;周日&#xff09;&#xff0c;北京時間早上五點。 寫在最前面&#xff1a;好不容易五點爬了起來圍觀mock&#xff0c;結果早上周賽睡過去了&#xff0c;唉。orz。 面試官&#xff1a;wisdompeak&#xff0c;同學&#xff1a;littl…

js對象排序

Object.keys(objs).sort()可以獲取到排好序的keysvar objs {f: {id: 2,name: 2}, a: {id: 3,name: 3}, c: {id: 1,name: 1} }; // 自定義排序規則&#xff0c;按對象的id排序 var sortedObjKeys Object.keys(objs).sort(function(a, b) {return objs[b].id - objs[a].id; });…

吳恩達機器學習筆記 —— 9 神經網絡學習

本章講述了神經網絡的起源與神經元模型&#xff0c;并且描述了前饋型神經網絡的構造。 更多內容參考 機器學習&深度學習 在傳統的線性回歸或者邏輯回歸中&#xff0c;如果特征很多&#xff0c;想要手動組合很多有效的特征是不現實的&#xff1b;而且處理這么大的特征數據量…

js中字符串編碼函數escape()、encodeURI()、encodeURIComponent()區別詳解

1 escape()函數 定義和用法escape() 函數可對字符串進行編碼&#xff0c;這樣就可以在所有的計算機上讀取該字符串。 語法escape(string) 參數 描述string 必需。要被轉義或編碼的字符串。 返回值已編碼的 string 的副本。其中某些字符被替換成了十六進制的轉義序列。 說明該方…

【SRH】------node遵循的規范,模塊劃分

1.node遵循的是COMMONJS規范&#xff08;規范即規定如何導入導出&#xff09;1、導入&#xff1a;require 2、導出&#xff1a;module.exports2.模塊分類&#xff1a;1、核心模塊nodejs下載安裝完成后會自帶一些模塊&#xff0c;這些模塊不需要下載&#xff0c;可以直接通過r…

vue.js開發環境搭建

環境準備 Node.js Javascript的運行時環境npm Node.js下的包管理工具webpack 前端資源模塊化管理和打包工具vue-cli 腳手架構建工具cnpm npm的淘寶鏡像 Vue.js安裝 Node.js的安裝非常容易&#xff0c;首先從官網下載你所需操作系統的版本&#xff0c;然后一直下一步就ok&…

mysql數據庫刪除一條數據后還想讓新增數據從空缺id處開始

方法1&#xff1a; truncate table 你的表名 //這樣不但將數據全部刪除&#xff0c;而且重新定位自增的字段 方法2&#xff1a; delete from 你的表名 dbcc checkident(你的表名,reseed,0) //重新定位自增的字段&#xff0c;讓它從1開始 方法3&#xff1a; 如果你要保存你的數…

Object相關方法

const object1 {a: somestring,b: 42,c: false };console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false]該Object.values()方法返回給定對象自己的可枚舉屬性值的數組&#xff0c;其順序與for...in循環提供的順序相同&#xf…

用Itextsharp 組件導出PDF 的文檔的方法

Itextsharp 是一個很強大&#xff0c;開源的&#xff0c;輕量級的 PDF 生成組件&#xff0c;官方網上好像沒有相應的API 說明文檔&#xff0c;以下是在工作中使用的心得與體會&#xff0c;并附上源碼&#xff0c;功能包含了pdf 的創建&#xff0c;table 的創建&#xff0c; 圖片…

正則基礎知識

創建正則表達式 1.使用new來創建 var exp new RegExp(box , gi );g 全局匹配 i 忽略大小寫 m 多行匹配2.使用字面量 var exp /box/gi; 直接用2個 / ; 在倆個斜杠后加上模式修飾符&#xff1b; 倆種創建方式比較: 1.使用字面量方式創建用的更加廣泛; 2.當要匹配的內容是變量時,…