js获取table表格数据并返回对象数组（工作记录）
此业务为通过原生JS获取table值，并返回一个对象数组
·
1、需求目的
实际应用中有获取table表格数据的需求，并且常用处理为返回对象数组，方便进行处理；下面针对此问题进行解决记录
2、表格代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="tab">
<thead>
<tr>
<th style="width:10%" id="xh">序号</th>
<th style="width:40%" id="dah">档案号</th>
<th style="width:50%" id="wlwz">物理位置</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td id="1">1</td>
<td>5566</td>
<td>5566</td>
</tr>
<tr id="2">
<td>2</td>
<td>7788</td>
<td>7788</td>
</tr>
<tr id="3">
<td>4</td>
<td>9900</td>
<td>9900</td>
</tr>
</tbody>
</table>
<input type="button" value="获取表格数据" onclick="getvalue()" />
</body>
</html>3、获取每个单元值
处理逻辑：先获取整个表格对象，在通过双层循环逐个单元各获取每个单元格值，如下：
<script type="text/javascript">
function getvalue(){
var obj=document.getElementById("tab");
var rows=obj.rows;
for(var i=1;i<rows.length;i++){ //由于第一行一般为标题，所以从第二行开始获取值）
for(var j=0;j<rows[i].cells.length;j++){
console.log(rows[i].cells[j].innerHTML)
}
}
}
</script>重新组装方法
值已拿到，现在用标题的id作为key，单元格值作为value拼接JSON，并将每行拼接的JSON存入数组中，成品代码：
function getvalue(){
var gridArr=[];
var obj=document.getElementById("tab");
var rows=obj.rows;
console.log(gridArr.length)
for(var i=1;i<rows.length;i++){ //行
var griditem={};
for(var j=0;j<rows[i].cells.length;j++){
griditem[rows[0].cells[j].id]=rows[i].cells[j].innerHTML;
}
gridArr.push(griditem);
}
console.log(gridArr)
}最终效果：
4、总结
首先通过document.getElementById获取表格对象，在通过obj.rows获取行对象，运用双层for循环逐个获取单元格值，并拼接JSON对象，最后将JSON对象存入数组中即可。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)