當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML页面提交TABLE

發布時間：2023/12/10 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。