Home > Article > Web Front-end > How to use js traversal to obtain data in the table
This article will introduce how to use js to obtain the content of a certain cell in the table. The table is composed of table, tr, td and other html tags. table represents a table, tr represents a row, and td represents a column in a row.
<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>
First, you need to add an id to the table, so that it is convenient to locate which table. For example
<table id="mytable"></table>
Get the number of rows in the table
<script type="text/javascript">/** * 获取表格行数 * @param Int id 表格id * @return Int */function getTableRowsLength(id){ var mytable = document.getElementById(id); return mytable.rows.length; } </script>
Get the number of rows and columns in the table
<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>
Traverse the table content and save it to the array
<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>
<!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><p id="result"></p></p> </body></html>
This article explains how to use js traversal to obtain data in the table. For more related content, please pay attention to the php Chinese website.
Related recommendations:
How to achieve rapid deduplication effect of php array elements
How to improve efficiency by searching array elements through php Method
Explanation on mysql strict mode Strict Mode
The above is the detailed content of How to use js traversal to obtain data in the table. For more information, please follow other related articles on the PHP Chinese website!