집 >웹 프론트엔드 >JS 튜토리얼 >js 탐색을 사용하여 테이블의 데이터를 얻는 방법

js 탐색을 사용하여 테이블의 데이터를 얻는 방법

jacklove원래의: 2018-06-09 09:55:054420검색

이 글에서는 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>

2. 테이블의 모든 내용을 탐색하는 방법

먼저 테이블에 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>

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 = &#39;&#39;;        for(i=0,rows=data.length; i<rows; i++){            for(j=0,cells=data[i].length; j<cells; j++){
                tmp += data[i][j] + &#39;,&#39;;
            }
            tmp += &#39;<br>&#39;;
        }
        document.getElementById(&#39;result&#39;).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(&#39;mytable&#39;)"></p>
    <p><p id="result"></p></p>
 </body></html>

이 문서에서는 js를 사용하여 테이블 콘텐츠 데이터 메서드를 탐색하는 방법을 설명합니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 참고하세요.

js 탐색을 사용하여 테이블의 데이터를 얻는 방법

1. 일반적인 테이블 구조는 다음과 같습니다

2. 테이블의 모든 내용을 탐색하는 방법

3. 테이블 콘텐츠 탐색의 전체 예

관련 기사