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