<!doctype html>
<html>
<head><title>table 表提交數據（不用對應input版）</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>
<script type="text/javascript">
var cookie = document.getElementById('save-cookie');
var save = document.getElementById('save');
var table = document.getElementById('table-batabase');
var myform = document.getElementById('myform');
cookie.onclick = function(){
alert('你點擊了暫存功能');
}
save.onclick = function(){
//alert(table.rows.length);
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();
}
</script>
</body>
</html>
思 路：將table裏的值取出，放在json中，賦給一個input，通過一個input來實現table表數據提交到服務器，就可以避免頁面存在太多input框。
關鍵點:
1. rows/childNodes 獲取某元素下的所有子節點；
2. JSON.stringify(?) 將對象轉爲json數據；
3. dataArray.toString() 將數組轉換成json。