Comment utiliser js traversal pour obtenir des données dans le tableau-js tutoriel-php.cn

Comment utiliser js traversal pour obtenir des données dans le tableau

jacklove

Libérer： 2018-06-09 09:55:05

original

4447 Les gens l'ont consulté

Cet article expliquera comment utiliser js pour obtenir le contenu d'une certaine cellule du tableau. Le tableau est composé de table, tr, td et d'autres balises html. table représente un tableau, tr représente une ligne et td représente une colonne dans une ligne.

1. La structure générale du tableau est la suivante

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

Copier après la connexion

2 Comment parcourir tout le contenu du tableau

Tout d'abord, vous devez ajouter un identifiant à. le tableau, afin qu'il soit plus facile de localiser lequel tableau, comme

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

Copier après la connexion

Obtenir le nombre de lignes dans le tableau

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

Copier après la connexion

Obtenir le nombre de lignes dans le tableau Nombre de lignes et de colonnes

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

Copier après la connexion

Parcourez le contenu de la table et enregistrez-le dans le tableau

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

Copier après la connexion

3. Traverse Exemple complet de contenu de table

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

Copier après la connexion

Cet article explique comment utiliser la traversée js pour obtenir des données dans le tableau. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois.

Recommandations associées :

Comment obtenir un effet de déduplication rapide des éléments d'un tableau PHP

Comment trouver des éléments d'un tableau via PHP pour améliorer l'efficacité Méthode

Explication sur le mode strict mysql Mode strict

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!