js遍历获取表格内数据方法

最新推荐文章于 2023-11-28 15:55:13 发布

这么红的花

最新推荐文章于 2023-11-28 15:55:13 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/qq_43679771/article/details/87876615

版权

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。

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>  
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.遍历表格中所有内容方法

首先需要給table加上id，这样方便定位到哪一个表格，例如

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

获取表格行数

<script type="text/javascript">/**  * 获取表格行数 * @param  Int id 表格id * @return Int */function getTableRowsLength(id){    var mytable = document.getElementById(id);    return mytable.rows.length;}</script>
  
  1
2
3
4
5
6
7
8
9
10
11

获取表格某一行列数

<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>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

遍历表格内容保存到数组

<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>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69