Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Verwendungscodes, wie Javascript Tabellendaten durchläuft

Detaillierte Erläuterung des Verwendungscodes, wie Javascript Tabellendaten durchläuft

伊谢尔伦Original: 2017-07-22 10:10:081345Durchsuche

Stellt vor, wie man mit js den Inhalt einer bestimmten Zelle in einer Tabelle erhält. Die Tabelle besteht aus table, tr, td und anderen HTML-Tags. table repräsentiert eine Tabelle, tr repräsentiert eine Zeile und td repräsentiert eine Spalte in einer Zeile.

1. Die allgemeine Tabellenstruktur ist wie folgt:

<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 in der Tabelle Die Methode

muss der Tabelle zunächst eine ID hinzufügen, damit leicht gefunden werden kann, um welche Tabelle es sich handelt, zum Beispiel

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

um die Tabelle zu erhalten Eine bestimmte Anzahl von Zeilen und Spalten

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

Durchlaufen Sie den Tabelleninhalt und speichern Sie ihn zum 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>

3. Vollständiges Beispiel für das Durchlaufen von Tabelleninhalten

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Verwendungscodes, wie Javascript Tabellendaten durchläuft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der ursprünglichen Methode und der aktualisierten Methode zum Abrufen von Formulardaten mithilfe von JavascriptNächster Artikel：Ausführliche Erläuterung der ursprünglichen Methode und der aktualisierten Methode zum Abrufen von Formulardaten mithilfe von Javascript

In Verbindung stehende Artikel

Mehr sehen