집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트가 테이블 데이터를 순회하는 방법에 대한 사용 코드에 대한 자세한 설명

자바스크립트가 테이블 데이터를 순회하는 방법에 대한 사용 코드에 대한 자세한 설명

伊谢尔伦원래의: 2017-07-22 10:10:081372검색

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를 추가해야 합니다. 어떤 테이블인지 쉽게 찾을 수 있습니다. 예를 들어

<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>

위 내용은 자바스크립트가 테이블 데이터를 순회하는 방법에 대한 사용 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트에서 양식 데이터를 얻는 원래 방법과 업그레이드된 방법에 대한 자세한 설명다음 기사：자바스크립트에서 양식 데이터를 얻는 원래 방법과 업그레이드된 방법에 대한 자세한 설명