JQuery добавить строку после первой строки

Question

У меня есть HTML разметки, как этот

<table class="left-column-form" id="ref-table"> 
        <tr> 
         <th style="width:20%">Shipping Service Name</th> 
        <th style="width:20%">From Price</th> 
         <th style="width:20%">To Price</th> 
         <th style="width:20%">Price</th> 
         <th style="width:20%">Additional Price</th> 
        </tr> 
      <tr id="row"> 
         <td style="width:20%;"> 
         <select name=""> 
          <option value="" selected>--Select-- </option> 
          <option value="service-one">Service One </option> 
          <option value="service-two">Service Two </option> 
          <option value="service-three">Service Three </option> 
         </select> 
         </td> 
         <td style="width:20%;"> 
          <input type="text" name="from-price"/> 
         </td> 
         <td style="width:20%;"> 
          <input type="text" name="to-price"/> 
         </td> 
         <td style="width:20%;"> 
          <input type="text" name="price"/> 
         </td> 
         <td style="width:20%;"> 
          <input type="text" name="additional-price"/> 
         </td> 
        </tr> 
       </table> 

при том, что у меня есть одна кнопка, как этот

<input type="submit" id="add-services" value="Add Service" /> 

Я хочу, что, когда кто-то нажмет на кнопку он добавит еще одну строку, такую ​​как

<tr id="row"> 
        <td style="width:20%;"> 
        <select name=""> 
         <option value="" selected>--Select-- </option> 
         <option value="service-one">Service One </option> 
         <option value="service-two">Service Two </option> 
         <option value="service-three">Service Three </option> 
        </select> 
        </td> 
        <td style="width:20%;"> 
         <input type="text" name="from-price"/> 
        </td> 
        <td style="width:20%;"> 
         <input type="text" name="to-price"/> 
        </td> 
        <td style="width:20%;"> 
         <input type="text" name="price"/> 
        </td> 
        <td style="width:20%;"> 
         <input type="text" name="additional-price"/> 
        </td> 
       </tr> 

сразу после первой строки. Так может кто-нибудь сказать мне, как сделать это в хорошей кодировке?

Answer 1

Измените идентификаторы на строки в классе, так как идентификаторы должны быть уникальными:

На странице загрузки можно скопировать строку и сохранить ее:

var $row=$('tr.row:first').clone();  
/* add a copy back in table*/ 
$('#add-services').click(function(){ 
    $('tr:first').after($row.clone()); 
}); 

Если необходимо очистить входные значения iniital клона оных:

$row.find('input').val('') 

Answer 2

Вы можете попробовать это:

$("#myButton").click(function(){ 
    $("#ref-table tr:first").after("<tr><td class='myTd'>content2</td><td class='myTd'>content2</td></tr>"); 
}); 

Fiddle: http://jsfiddle.net/T88k7/4/

Answer 3

Две вещи:

Семантика - использовать <tbody> и <thead>

Вы можете написать таблицу, как это:

<table id="ref-table"> 
    <thead><tr><td colspan="5"><select name="..">...</select></td></tr></thead> 
    <tbody><tr><td><input type="text" name="from-price"/></td>...</tr></tbody> 
</table> 

Использование .clone():

После вы сделали это, вы можете легко сделать использование вызова jQuery's clone.

Вы всегда можете сделать что-то вроде этого:

function copyMe() { 
    return $(this).clone().insertAfter(this).first(); 
} 

var newRow = $('#ref-table tbody tr:first-child').map(copyMe)[0] 

Затем вы можете использовать newRow однако вы хотите заменить ценности клонированного входные с них новым/по умолчанию. Вы можете настроить first-child на last-child (подумайте об удобстве пользователя).

Большое преимущество в том, что вам не нужно вставлять HTML в свой JavaScript. Вы даже можете скрыть первую строку с помощью CSS и использовать ее в качестве шаблона и не более того. Вы также можете посмотреть на insertBefore.

Answer 4

Кажется, что желаемое поведение заключается в том, чтобы добавить строку после первой строки, а не после строки заголовка, а ниже - код (протестированный), который делает это.

$(function() { 
    var rowNo = 0; 

    $("#add-services").click(function(e) { 
     e.preventDefault(); 
     var rowHtml = '<tr id="row'+(rowNo++)+'"><td>'+$('select[name="service-name"]').val()+'</td><td>'+$('input[name="from-price"]').val()+'</td><td>'+$('input[name="to-price"]').val()+'</td><td>'+$('input[name="price"]').val()+'</td><td>'+$('input[name="additional-price"]').val()+'</td></tr>'; 
     $('#ref-table > tbody > tr').eq(1).after(rowHtml); 
    }); 
}); 

Кроме того, кажется, что вы пропустили, чтобы добавить имя в поле выбора.Пожалуйста, замените

<select name=""> 

с

<select name="service-name">