1. 程式人生 > >獲取table表格每行每列的資料 (橫向遍歷)

獲取table表格每行每列的資料 (橫向遍歷)

線上展示 F12開啟開發人員工具檢視console內容 
表格資料: 
這裡寫圖片描述

獲取表格每行每列資料:

這裡寫圖片描述

 

html:

<form id="form1">
     <div>
         <table id="tbl" border="1">
             <tr>
                 <td> 11</td>
                 <td> 12</td>
                 <td> 13</td>
             </tr>
            <tr>
                 <td> 21</td>
                 <td> 22</td>
                 <td> 23</td>
             </tr>
             <tr>
                 <td> 31</td>
                 <td> 32</td>
                 <td> 33</td>
             </tr>
         </table>
     </div>
</form>
 

css:

<style>
    #tbl {
        width: 40%;/*表格寬度*/
        border-collapse: collapse;/*表格單邊框*/              
        text-align: center;/*單元格文字居中顯示*/
    }
</style>
 

javascript遍歷每行每列:

<script>
    function load(){
        var tab=document.getElementById("tbl");
        var rows=tab.rows;
        console.log(rows.length);//獲取表格的行數

        for(var i=0;i<rows.length;i++){ //遍歷表格的行
           for(var j=0;j<rows[i].cells.length;j++){  //遍歷每行的列
           console.log("第"+(i+1)+"行,第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
           }
        }
     }
    load();//函式呼叫
</script>
--------------------- 
作者:erdouzhang 
來源:CSDN 
原文:https://blog.csdn.net/erdouzhang/article/details/70669990 
版權宣告:本文為博主原創文章,轉載請附上博文連結!