Comment modifier javascript dans le tableau

Table est l'un des éléments couramment utilisés dans le développement WEB, utilisé pour afficher des données ou mettre en page des pages, etc. Les opérations JavaScript liées aux tables font également partie des compétences nécessaires pour les développeurs. Cet article présentera en détail comment modifier l'opération JavaScript de la table.

1. Connaissance de base des tableaux

En HTML, les tableaux sont implémentés à l'aide de balises telles que table, tr, th, td, etc., où table représente le tableau entier, tr représente les lignes du tableau, th représente l'en-tête. cellule dans le tableau, et td Représente les cellules de données dans un tableau. Ce qui suit est un tableau simple :

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

De cette façon, un tableau contenant trois colonnes de données peut être affiché sur la page. Ensuite, nous utiliserons ce tableau comme exemple pour montrer comment modifier le tableau via JavaScript.

2. Obtenez l'objet table

En JavaScript, nous pouvons obtenir l'objet table via la méthode getElementById ou la méthode getElementsByTagName de l'objet document, par exemple :

var table = document.getElementById("tableId"); //通过id获取表格对象
var td = document.getElementsByTagName("td"); //通过标签名获取所有表格单元格对象

Pour utiliser la méthode getElementById pour obtenir l'objet table, vous devez pour ajouter l'attribut id au tableau correspondant en HTML, par exemple :

<table id="tableId">
  <!-- 表格内容 -->
</table>

3. Récupérer les lignes et les cellules du tableau

Obtenir les lignes et les cellules du tableau est l'une des opérations les plus élémentaires pour faire fonctionner le tableau. Nous pouvons obtenir toutes les lignes du tableau via l'attribut rows de l'objet table, et obtenir toutes les cellules de la ligne via l'attribut cell de l'objet row. Par exemple :

//获取表头行对象
var thead = table.rows[0];
//获取第一行对象
var tr = table.rows[1];
//获取第一行第一列单元格对象
var td = table.rows[1].cells[0];
//获取第二行第三列单元格对象
var td2 = table.rows[2].cells[2];

4. Ajouter des lignes et des cellules

Il est souvent nécessaire d'ajouter dynamiquement des lignes et des cellules dans des tableaux. Nous pouvons ajouter des lignes via la méthode insertRow, qui renvoie un objet ligne, et nous pouvons ajouter des cellules via la méthode insertCell de l'objet. Par exemple :

//在表格第二个位置插入一行
var newRow = table.insertRow(1);
//在该行第一个位置插入一个单元格
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'Jerry';
//在该行第二个位置插入一个单元格
newCell = newRow.insertCell(1);
newCell.innerHTML = 18;
//在该行第三个位置插入一个单元格
newCell = newRow.insertCell(2);
newCell.innerHTML = '男';

Cela insérera une ligne à la deuxième position du tableau et insérera trois cellules dans la ligne.

5. Supprimer des lignes et des cellules

La suppression de lignes et de cellules dans des tableaux est également une opération courante. Nous pouvons supprimer des lignes via la méthode Remove de l'objet Row ou supprimer des cellules via la méthode Remove de l'objet Cell. Par exemple :

//获取第三行对象
var row = table.rows[2];
//删除该行
table.deleteRow(row.rowIndex);
//获取第一行第二个单元格对象
var cell = table.rows[0].cells[1];
//删除该单元格
cell.parentNode.removeChild(cell);

6. Fusionner des cellules

Parfois, nous devons fusionner des cellules adjacentes dans le tableau pour mettre en page la page ou afficher des données, etc. Nous pouvons utiliser les propriétés rowSpan et colSpan pour fusionner des cellules. Par exemple :

//合并第一行第一列和第二列单元格
var td1 = table.rows[0].cells[0];
td1.rowSpan = 2;
//删除第二行第一列单元格
table.rows[1].deleteCell(0);

Cela fusionne les cellules de la première ligne, de la première colonne et de la deuxième colonne, et supprime les cellules de la deuxième ligne, de la première colonne.

7. Modifier le contenu des cellules

En plus de l'ajout, de la suppression et de la fusion de cellules, la modification du contenu des cellules est également l'une des opérations courantes. Nous pouvons modifier le contenu du texte à l'intérieur de la cellule via la propriété innerHTML ou la propriété innerText de l'objet cellule. Par exemple :

//获取第二行第三列单元格对象
var td = table.rows[2].cells[2];
//修改单元格内部文本内容
td.innerHTML = '女';

À ce moment, le contenu du texte de la cellule dans la deuxième ligne et la troisième colonne deviendra « Femme ».

8. Résumé

Ce qui précède présente les opérations courantes d'édition JavaScript des tableaux, notamment l'obtention d'objets de tableau, l'obtention de lignes et de cellules, l'ajout et la suppression de lignes et de cellules, la fusion de cellules, la modification du contenu des cellules, etc. La maîtrise de ces opérations peut apporter plus de commodité et de flexibilité à l'édition de nos tableaux, et peut également améliorer nos capacités de développement WEB.

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!