jquery获取table,遍历输出tr中各个td的内容(转载)

简介: 首先,依赖jquery..1 $('#btntb').click(function(){2 $('#tab tr').each(function(i){ // 遍历 tr3 $(this).children('td').each(function(j){ // 遍历 tr 的各个 td4 alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+$(this).text()+"。

 

首先,依赖jquery..

1 $('#btntb').click(function(){
2    $('#tab tr').each(function(i){                   // 遍历 tr
3       $(this).children('td').each(function(j){  // 遍历 tr 的各个 td
4          alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+$(this).text()+"。");
5       });
6    });
7 });
 

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>
 

 

相关文章
Xpath获取Table+遍历tr
Xpath获取Table+遍历tr
339 3
|
人工智能 JavaScript 算法
js将table生成excel文件并去除表格中的多余tr(js去除表格中空的tr标签)
js将table生成excel文件并去除表格中的多余tr(js去除表格中空的tr标签)
333 1
|
JavaScript
jquery 实现 table 和 标题 的联动显示
jquery 实现 table 和 标题 的联动显示
304 0
jquery 实现 table 和 标题 的联动显示
|
前端开发 JavaScript
【WEB前端】【JQuery】搜索li标签的内容
【WEB前端】【JQuery】搜索li标签的内容
225 0
【WEB前端】【JQuery】搜索li标签的内容
|
前端开发 数据安全/隐私保护
前端的那些基本标签【a table tr caption image等等......】
前端的那些基本标签【a table tr caption image等等......】
399 0
前端的那些基本标签【a table tr caption image等等......】
|
人工智能 前端开发 JavaScript
js将table生成excel文件并去除表格中的多余tr(js去除表格中空的tr标签)
由于数据非常的乱,php的方法肯定是行不通了,于是我打算 用前端的方法将table表中的数据下载下来。于是乎 ,我打印看了下源代码,发现多了很多tr标签。做好了之后,可以正常使用,将数据库的信息筛选出来。,其他网上的我的没有成功,这个可以解决。但是下载下来的文件,出现空格。可以参考这个文件,很有用。对方加了一个功能下载,将其替换掉 完美解决。......
267 0
js将table生成excel文件并去除表格中的多余tr(js去除表格中空的tr标签)
|
JavaScript PHP
phpQuery,php爬虫类库,像jQuery一样轻松采集内容
phpQuery,php爬虫类库,像jQuery一样轻松采集内容
436 0
|
JavaScript
Jquery操作文本内容(三个方法:html()、text()、var())
Jquery操作文本内容(三个方法:html()、text()、var())
|
JavaScript
循环遍历获取table中的td,tr
html中获取table的td,tr数据
682 0
|
JavaScript
jQuery下table操作示例(附案例源码)
jQuery下table操作示例(附案例源码)
297 0
jQuery下table操作示例(附案例源码)