js獲取table表格數(shù)據(jù)并返回對象數(shù)組（工作記錄）

hncdman 2023-02-25 發(fā)布于湖南

展開全文

此業(yè)務為通過原生JS獲取table值，并返回一個對象數(shù)組

叩叮ING ?·?2022-07-25 20:03:13

1、需求目的

實際應用中有獲取table表格數(shù)據(jù)的需求，并且常用處理為返回對象數(shù)組，方便進行處理；下面針對此問題進行解決記錄

推薦內(nèi)容

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="獲取表格數(shù)據(jù)" onclick="getvalue()" />
	</body></html>

3、獲取每個單元值

處理邏輯：先獲取整個表格對象，在通過雙層循環(huán)逐個單元各獲取每個單元格值，如下：

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

重新組裝方法

值已拿到，現(xiàn)在用標題的id作為key，單元格值作為value拼接JSON，并將每行拼接的JSON存入數(shù)組中，成品代碼：

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

最終效果：