jquery、js獲取table,遍歷輸出tr中各個td的內容。


 

 

首先,依賴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>
復制代碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM