zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    js基础第七天
    js基础第六天
    js基础第四天
    js基础第3天
    js基础第二天
    js基础第一天
    第一天CSS实战培训及笔记及感想
    2015年10月23日JS笔记
    表格类选中区域复制的实现
    复杂表头
  • 原文地址:https://www.cnblogs.com/nmnm/p/7722456.html
Copyright © 2011-2022 走看看