jquery、js获取table,遍历输出tr中各个td的内容

最新推荐文章于 2021-03-30 17:42:05 发布

转载最新推荐文章于 2021-03-30 17:42:05 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/nmnm/p/7722456.html

js 同时被 3 个专栏收录

108 篇文章

订阅专栏

25 篇文章

订阅专栏

JQuery常用方法

20 篇文章

订阅专栏

本文介绍如何使用jQuery和原生JavaScript来遍历HTML表格中的每一行和每一列，并获取单元格内的文本内容。

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

使用jquery获取：
js代码：

$('#btntb').click(function(){
   $('#tab tr').each(function(i){                   // 遍历 tr
      $(this).children('td').each(function(j){  // 遍历 tr 的各个 td
         alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
      });
   });
});

使用js获取：
js代码：

var tb = document.getElementById('tab');    // table 的 id
var rows = tb.rows;                           // 获取表格所有行
for(var i = 0; i<rows.length; i++ ){
   for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td
       alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+rows[i].cells[j].innerHTML+"。");           // 输出每个td的内容
   }
}

html代码：

<div align="center">
	<table id="tab" border="1" align="center">

		<tr>
			<td>西瓜</td>
			<td>橙</td>
		</tr>

		<tr>
			<td>芒果</td>
			<td>桔子</td>
		</tr>

		<tr>
			<td>奇异果</td>
			<td>葡萄</td>
			<td>西柚</td>
		</tr>

	</table>

	<br>

	<button id="btntb">遍历table</button>

</div>