ホームページ > 記事 > ウェブフロントエンド > JavaScript がテーブルデータを走査する方法の使用コードの詳細な説明

JavaScript がテーブルデータを走査する方法の使用コードの詳細な説明

伊谢尔伦オリジナル: 2017-07-22 10:10:081345ブラウズ

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>

以上がJavaScript がテーブルデータを走査する方法の使用コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptを使ってフォームデータを取得する独自の方法とバージョンアップした方法を詳しく解説次の記事：JavaScriptを使ってフォームデータを取得する独自の方法とバージョンアップした方法を詳しく解説

続きを見る

JavaScript がテーブル データを走査する方法の使用コードの詳細な説明

関連記事

JavaScript がテーブルデータを走査する方法の使用コードの詳細な説明