Jak dodać dodatkowy wiersz tabeli html po kliknięciu przycisku za pomocą jQuery?

Question

mam następujące:

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

i za każdym razem klikam tag link do 'dodać autora, chcę utworzyć dodatkowy wiersz tabeli jak poniżej:

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

spojrzałem na .append() i nie jestem pewien, jak go użyć w mojej sytuacji. I chciałbym móc dodać nieskończoną ilość nowych wierszy tabeli. Jak mam to zrobic?

Answer 1

Po pierwsze, poprawić HTML jako:

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

(Dodałem wcięcia tylko dla widoczności) i nie używać inline JavaScript. Plus, bądź konsekwentny, najlepiej używaj " (podwójne cudzysłowy) dla atrybutów HTML, ' (pojedyncze cudzysłowy) dla ciągów JavaScript.

drugie, zrobić coś takiego:

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

    }); 
}); 

Będzie dodać wiersz do tabeli z każde kliknięcie na link posiadającego klasę add-author (tak aby mieć pewność, żaden inny związek jest influented), zwiększając liczbę na koniec nazwy każdej wstawionej nazwy pola przez 1. Wiersz zostanie wstawiony na końcu tabeli o klasie authors-list (ten sam powód, co w przypadku klasy dla łącza). Zobacz dowód: this jsfiddle.

Answer 2

Sprawdź to here.

Prawdopodobnie będziesz chciał zwiększyć liczbę w atrybutach nazwy w każdej iteracji.

Answer 3

Podaj identyfikator tabeli, załóżmy my_table i id do zakotwiczony a załóżmy my_button następnie spróbuj poniżej:

kodzie modyfikowany:

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

i dodaj poniższy skrypt po uwzględnieniu biblioteka jquery na twojej stronie.

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

    } 
}