Làm cách nào để thêm hàng bảng html phụ khi nhấp vào nút bằng jQuery?

Question

tôi có như sau:

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

và mỗi khi tôi nhấp vào thẻ liên kết để 'thêm tác giả', tôi muốn tạo ra một dòng của bảng phụ như sau:

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

Tôi nhìn .append() và tôi không chắc chắn chính xác cách sử dụng nó cho tình huống của mình. Và tôi muốn có thể thêm vô số các hàng trong bảng mới. Làm thế nào để tôi làm điều này?

Answer 1

Thứ nhất, sửa HTML của bạn như:

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

(Tôi đã thêm indents chỉ cho tầm nhìn) và không sử dụng inline Javascript. Ngoài ra, nhất quán, tốt nhất là sử dụng " (dấu ngoặc kép) cho thuộc tính HTML, ' (dấu nháy đơn) cho chuỗi JavaScript.

Thứ hai, làm một cái gì đó như thế:

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

    }); 
}); 

Nó sẽ thêm một hàng vào bảng với mỗi nhấp chuột vào liên kết có lớp add-author (chỉ để đảm bảo không có liên kết khác được influented), incrementing số tại cuối tên của mỗi trường được chèn vào bởi 1. Hàng sẽ được chèn vào cuối bảng có lớp authors-list (cùng một lý do như với lớp cho một liên kết). Xem this jsfiddle làm bằng chứng.

Answer 2

Hãy khám phá here.

Có thể bạn sẽ muốn tăng số trong thuộc tính tên trong mỗi lần lặp.

Answer 3

Hãy cho một id để bàn của bạn, giả sử my_table và id để neo một my_button giả sử sau đó thử dưới đây:

mã sửa đổi của bạn:

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

Và thêm đoạn mã dưới đây sau bao gồm cả thư viện jquery trong trang của bạn.

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

    } 
}