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>
 

 

相关文章
|
1月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
9 0
|
3月前
HTML中tr、th和td
HTML中tr、th和td
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
6月前
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
2月前
Xpath获取Table+遍历tr
Xpath获取Table+遍历tr
40 3
|
3月前
|
JavaScript
jquery的遍历
jquery的遍历
|
4月前
|
JavaScript 前端开发
jQuery 第九章(jQuery遍历)
jQuery 第九章(jQuery遍历)
28 0
|
5月前
|
JavaScript
jQuery 遍历 - siblings() 方法应用
jQuery 遍历 - siblings() 方法应用
29 0
|
5月前
|
JSON JavaScript 前端开发
JQuery数组遍历 - $.each(),$().each()和forEach()
JQuery数组遍历 - $.each(),$().each()和forEach()
50 0
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之遍历
前端基础 -JQuery之遍历
21 0