js获取table表格数据并返回对象数组（工作记录）

叩叮ING

已于 2022-07-25 20:15:58 修改

阅读量6.5k

点赞数 3

文章标签： javascript html 前端 json

于 2022-07-25 20:03:13 首次发布

本文链接：https://blog.csdn.net/weixin_43966996/article/details/125982231

版权

本文档记录了如何在HTML环境中获取表格数据并将其转换为JSON对象数组的过程。首先通过JavaScript的getElementById方法获取表格对象，然后通过双重循环遍历行和列获取每个单元格的值。接着，利用标题ID作为键，单元格内容作为值，构造JSON对象，并将每一行的数据存入数组。最终，实现了将表格数据结构化存储，便于进一步处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
	}

最终效果：