js遍歷獲取表格內數據方法

本文轉載自查看原文 2018-04-19 22:31 8981 js

1.一般的表格結構如下

<table>
 <tr>
   <td>id</td>
   <td>name</td>
 </tr>
 <tr>
   <td>1</td>
   <td>fdipzone</td>
 </tr>
 <tr>
   <td>2</td>
   <td>wing</td>
 </tr>
</table>

2.遍歷表格中所有內容方法

首先需要給table加上id，這樣方便定位到哪一個表格，例如

<table id="mytable"></table>

獲取表格行數

<script type="text/javascript">
/** 
 * 獲取表格行數
 * @param  Int id 表格id
 * @return Int
 */
function getTableRowsLength(id){
    var mytable = document.getElementById(id);
    return mytable.rows.length;
}
</script>

獲取表格某一行列數

<script type="text/javascript">
/** 
 * 獲取表格某一行列數
 * @param  Int id    表格id
 * @param  Int index 行數
 * @return Int
 */
function getTableRowCellsLength(id, index){
    var mytable = document.getElementById(id);
    if(index<mytable.rows.length){
        return mytable.rows[index].cells.length;
    }else{
        return 0;
    }
}
</script>

遍歷表格內容保存到數組

<script type="text/javascript">
/** 
 * 遍歷表格內容返回數組
 * @param  Int   id 表格id
 * @return Array
 */
function getTableContent(id){
    var mytable = document.getElementById(id);
    var data = [];
    for(var i=0,rows=mytable.rows.length; i<rows; i++){
        for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
            if(!data[i]){
                data[i] = new Array();
            }
            data[i][j] = mytable.rows[i].cells[j].innerHTML;
        }
    }
    return data;
}
</script>

3.遍歷表格內容完整例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title> 獲取表格內容 </title>
  <style type="text/css">
  table{width:300px; border:1px solid #000000; border-collapse:collapse;}
  td{border:1px solid #000000; border-collapse:collapse;}
  </style>
  <script type="text/javascript">

    /** 
     * 遍歷表格內容返回數組
     * @param  Int   id 表格id
     * @return Array
     */
    function getTableContent(id){
        var mytable = document.getElementById(id);
        var data = [];
        for(var i=0,rows=mytable.rows.length; i<rows; i++){
            for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
                if(!data[i]){
                    data[i] = new Array();
                }
                data[i][j] = mytable.rows[i].cells[j].innerHTML;
            }
        }
        return data;
    }

    /** 
     * 顯示表格內容
     * @param  Int   id 表格id
     */
    function showTableContent(id){
        var data = getTableContent(id);
        var tmp = '';
        for(i=0,rows=data.length; i<rows; i++){
            for(j=0,cells=data[i].length; j<cells; j++){
                tmp += data[i][j] + ',';
            }
            tmp += '<br>';
        }
        document.getElementById('result').innerHTML = tmp;
    }

  </script>
 </head>

 <body>
    <table id="mytable">
     <tr>
       <td>id</td>
       <td>name</td>
     </tr>
     <tr>
       <td>1</td>
       <td>fdipzone</td>
     </tr>
     <tr>
       <td>2</td>
       <td>wing</td>
     </tr>
    </table>

    <p><input type="button" name="btn" value="獲取表格數據" onclick="showTableContent('mytable')"></p>
    <p><div id="result"></div></p>
 </body>
</html>

免責聲明！

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

猜您在找 JS遍歷表格獲取每行數據及每個單元格數據 js遍歷checkbox獲取數據在循環遍歷數據的表格中獲取當行的數據 php從數據庫獲取數據並遍歷在表格中【JS】表格獲取每一列方法 vue, 遍歷表格數據 JS獲取一行2列的表格數據 Layui數據表格之獲取表格中所有的數據方法 js遍歷數據的方法總結：js中遍歷對象（5種）和遍歷數組（6種）原生JS操作table表格：修改表格內容，添加刪除行、列，獲取表格數據