Maison > interface Web > js tutoriel > Introduction détaillée à la mise en œuvre de l'ajout et de la suppression dynamiques de tables JavaScript

Introduction détaillée à la mise en œuvre de l'ajout et de la suppression dynamiques de tables JavaScript

黄舟
Libérer: 2017-03-21 14:46:38
original
1385 Les gens l'ont consulté

Cet article présente principalement JavaScript pour implémenter l'ajout et la suppression dynamiques de tableaux, qui peuvent réaliser la fonction d'ajout et de suppression de données dans les tableaux. C'est très pratique. Ceux qui sont intéressés peuvent en apprendre davantage. 🎜>

ci-dessus Remplissez la zone de texte avec "Nom/E-mail/Âge" pour ajouter ou supprimer dynamiquement des cellules dans le tableau ci-dessous


Effet :

Introduction détaillée à la mise en œuvre de lajout et de la suppression dynamiques de tables JavaScript

1 .Code HTML :

<body>
<p align="center" id="info">
  姓名 : <input type="text" id = "username"> 
  Email : <input type="text" id = "email"> 
  年龄 : <input type="text" id = "age"> 
</p>

<p align="center"><input type="button" value="添加" onclick="addRow()"></p>
<hr>
<table align="center" border="1" id = "testTble" style="width: 60%;text-align: center;border:1px solid lightgreen">
  <tr>
    <td>姓名</td>
    <td>Email</td>
    <td>年龄</td>
    <td>操作</td>
  </tr>
</table>
Copier après la connexion
2.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal