So verwenden Sie js-Traversal, um Daten in der Tabelle abzurufen-js-Tutorial-php.cn

So verwenden Sie js-Traversal, um Daten in der Tabelle abzurufen

jacklove

Freigeben： 2018-06-09 09:55:05

Original

4459 Leute haben es durchsucht

In diesem Artikel wird erläutert, wie Sie mit js den Inhalt einer bestimmten Zelle in der Tabelle abrufen. 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>

Nach dem Login kopieren

2. So durchlaufen Sie den gesamten Inhalt der Tabelle

Zuerst müssen Sie der Tabelle eine ID hinzufügen , damit es einfacher ist, die Tabelle zu finden. Beispiel:

<table id="mytable"></table>

Nach dem Login kopieren

Ermitteln Sie die Anzahl der Zeilen in der Tabelle

<script type="text/javascript">/** 
 * 获取表格行数
 * @param  Int id 表格id
 * @return Int
 */function getTableRowsLength(id){    var mytable = document.getElementById(id);    return mytable.rows.length;
}
</script>

Nach dem Login kopieren

Ermitteln Sie die Anzahl der Zeilen und Spalten in der Tabelle

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

Nach dem Login kopieren

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

Nach dem Login kopieren

3. Vollständiges Beispiel für das Durchlaufen des Tabelleninhalts

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

Nach dem Login kopieren

In diesem Artikel wird erläutert, wie Sie mit js Traversal Daten in der Tabelle erhalten. Für weitere verwandte Inhalte zahlen Sie bitte Aufmerksamkeit auf die chinesische PHP-Website.

Verwandte Empfehlungen:

So erzielen Sie einen schnellen Deduplizierungseffekt von PHP-Array-Elementen

So finden Sie Array-Elemente über PHP zur Verbesserung der Effizienz Methode

Erklärung zum strengen MySQL-Modus Strikter Modus

Das obige ist der detaillierte Inhalt vonSo verwenden Sie js-Traversal, um Daten in der Tabelle abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!