Come aggiungo una riga della tabella html aggiuntiva al clic del pulsante usando jQuery?

Question

Ho il seguente:

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

e ogni volta che clicco sul link tag a 'aggiunga autore', voglio creare una riga della tabella extra come il seguente:

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

ho guardato .append() e non sono sicuro di come utilizzarlo per la mia situazione. E mi piacerebbe poter aggiungere infinite quantità di nuove righe di tabella. Come faccio a fare questo?

Answer 1

In primo luogo, correggere il codice HTML come:

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

(ho trattino aggiunto solo per visibilità) e non utilizzare JavaScript inline. Inoltre, sii coerente, preferibilmente usa " (virgolette doppie) per gli attributi HTML, ' (virgolette singole) per le stringhe JavaScript.

In secondo luogo, fare qualcosa di simile:

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

    }); 
}); 

Sarà aggiungere una riga al tavolo con ogni click sul link con classe add-author (giusto per essere sicuri nessun altro collegamento è influented), numero incrementale a la fine del nome del nome di ogni campo inserito per 1. La riga verrà inserita alla fine della tabella con la classe authors-list (stesso motivo della classe per un collegamento). Vedere this jsfiddle come prova.

Answer 2

Check it out here.

Probabilmente vorrete aumentare il numero negli attributi del nome in ogni iterazione.

Answer 3

Dare un id al vostro tavolo, supponiamo my_table e un ID per l'ancora un my_button supponiamo quindi provare il seguito:

tuo codice modificato:

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

e aggiungere il seguente script dopo compreso il libreria jQuery nella tua pagina.

$(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; 

    } 
}