一、场景
传多个表格数据到后台
一般用 [] 这样定义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>