js遍歷獲取表格內資料方法
阿新 • • 發佈：2018-11-08
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://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
- 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"
- 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
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
