이 글에서는 js를 사용하여 테이블의 특정 셀 내용을 얻는 방법을 소개합니다. 테이블은 table, tr, td 및 기타 html 태그로 구성됩니다. table은 테이블을 나타내고, tr은 행을 나타내며, td는 행의 열을 나타냅니다.
<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>
먼저 테이블에 ID를 추가해야 어떤 테이블인지 쉽게 알 수 있습니다. example
<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>
<!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>
이 문서에서는 js를 사용하여 테이블 콘텐츠 데이터 메서드를 탐색하는 방법을 설명합니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 참고하세요.
관련 권장 사항:
위 내용은 js 탐색을 사용하여 테이블의 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!