web-dev-qa-db-fra.com

Comment ajouter une ligne de table HTML supplémentaire sur le bouton Cliquez sur Utiliser JQuery?

J'ai ce qui suit:

<table>
  <tr><td>author's first name</td><td>author's last name</td></tr>
  <tr><td><input type='text' name='first_name' /></td><td><input type='text' name='last_name' /></td></tr>
</table>
<a href='' onclick='return false;'>Add Author</a>

et chaque fois que je clique sur la balise de lien pour "Ajouter auteur", je souhaite créer une ligne supplémentaire de table comme suit:

  <tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>

J'ai regardé .appendez () et je ne suis pas sûr de savoir comment l'utiliser pour ma situation. Et j'aimerais pouvoir ajouter une quantité infinie de nouvelles lignes de table. Comment puis-je faire cela?

jqueryhtmlhtml-tablerow
12
Simon Suh

Premièrement, corrigez votre HTML comme suit:

<table class="authors-list">
    <tr>
        <td>author's first name</td><td>author's last name</td>
    </tr>
    <tr>
        <td>
            <input type="text" name="first_name" />
        </td>
        <td>
            <input type="text" name="last_name" />
        </td>
    </tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

(J'ai ajouté des trindages uniquement pour la visibilité) et n'utilisez pas d'inline JavaScript . De plus, soyez cohérent, utilisez de préférence " (citations doubles) pour les attributs HTML, ' (guillemets simples) pour les chaînes JavaScript.

Deuxièmement, fais quelque chose comme ça:

jQuery(function(){
    var counter = 1;
    jQuery('a.add-author').click(function(event){
        event.preventDefault();

        var newRow = jQuery('<tr><td><input type="text" name="first_name' +
            counter + '"/></td><td><input type="text" name="last_name' +
            counter + '"/></td></tr>');
            counter++;
        jQuery('table.authors-list').append(newRow);

    });
});

Il ajoutera une ligne à la table avec chaque clic sur le lien avec la classe add-author (Juste pour être sûr d'être sûr qu'aucun autre lien n'est influencé), incrémentation du nombre à la fin du nom de chaque nom du champ inséré par 1. La ligne sera insérée à la fin de la table à la classe authors-list (même raison que par classe pour un lien). Voir ce jsfiddle comme une preuve.

14
Tadeck

Vérifiez-le ici .

Vous voudrez probablement augmenter le nombre dans les attributs de noms dans chaque itération.

3
Shomz

Donnez un identifiant à votre table, supposons que my_table et une pièce d'identité à l'ancre A supposent que mon_button puisse alors essayer ci-dessous:

Votre code modifié:

<table id="my_table">
<tr><td>author's first name</td><td>author's last name</td></tr>
<tr><td><input type='text' name='first_name' /></td><td><input type='text' name='last_name' /></td></tr>
</table>
<a id="my_button" href='#'>Add Author</a>

Et ajoutez le script ci-dessous après inclure la bibliothèque JQuery de votre page.

$(document).ready(function()
{
  new_row="<tr><td><input type='text' name='first_name2' /></td><td><input type='text' name='last_name2'</td></tr>";
  $("#my_button").click(function()
  {    
    $("#my_table").append(new_row);
    return false;

  }
}
0
Ghost-Man