Maison  >  Article  >  interface Web  >  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

黄舟
黄舟original
2017-03-21 14:46:381348parcourir

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

Déclaration:
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