suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie js-Traversal, um Daten in der Tabelle abzurufen

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

jacklove
jackloveOriginal
2018-06-09 09:55:054458Durchsuche

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>

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>

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>


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>


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>

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>

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!

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：So behandeln Sie Deep Copy in VueNächster Artikel：So behandeln Sie Deep Copy in Vue

In Verbindung stehende Artikel

Mehr sehen