一、場景
傳多個表格數據到後臺
一般用 [] 這樣定義name：
<input name="grade[]"/>
<input name="age[]"/>
這樣的話後臺處理起來比較麻煩，直接根據class定位到表格的內容，把表格數據組裝成對象返回到後臺
二、示例
1、表格圖片
2、表格數據圖片
3、代碼
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>循環獲取表格的數據</title>
<style>
body{margin: 20px;}
input{
margin: 5px;
}
button{
margin: 20px;
}
.border_distance{
border-collapse: collapse; /**設置小表格之間的間距爲0*/
border-right:1px solid red;
border-top:1px solid red;
}
.border_distance tr td,th{
border-left:1px solid green;
border-bottom:1px solid green;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<table class="border_distance">
<thead>
<tr>
<th>姓名</th>
<th>年級</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">姓名1</td>
<td class="grade">年級1</td>
<td><input class="age" value="1"/></td>
</tr>
<tr>
<td class="name">姓名2</td>
<td class="grade">年級2</td>
<td><input class="age" value="2"/></td>
</tr>
<tr>
<td class="name">姓名3</td>
<td class="grade">年級3</td>
<td><input class="age" value="3"/></td>
</tr>
</tbody>
</table>
<button>查看錶格數據</button>
</body>
<script>
//按鈕點擊事件
$('button').click(function () {
let tableHtml = $(document).find('table.border_distance tbody tr');
let data = getTableData(tableHtml);
alert('表格的內容爲：' + JSON.stringify(data) );
//實際中把處理好的數據傳到後臺處理，如下：
/*
field.id = 1;
field.users = data;
$.ajax({
url: '/index/.../...',
type: 'POST',
data: field,
success: function(res) {
//相關操作
},
error: function(res) {
//異常提示
}
});
*/
});
/**
* 獲取表格數據
* @param tableHtml 表格Html
* @returns {Array}
*/
function getTableData(tableHtml) {
let result = [];
if (tableHtml) {
let length = tableHtml.length;
for(let i = 0; i < length; i++) { //追加數據
let trData = {}; // 每行的數據
//注意text()和val()的區別
let name = $(tableHtml).eq(i).find('.name').text();
let grade = $(tableHtml).eq(i).find('.grade').text();
let age = $(tableHtml).eq(i).find('.age').val();
//如果不存在給默認值（視情況而定）
name = (name == undefined) ? '' : name;
grade = (grade == undefined) ? '' : grade;
age = (age == undefined) ? 0 : age;
//數據賦值
trData.name = name;
trData.grade = grade;
trData.age = age;
result.push(trData); //數據追加
}
}
return result;
}
</script>
</html>