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

0

У меня есть моя 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>

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

  • 1
    А ты пробовал что до сих пор?
  • 0
    За исключением того, чтобы убедиться, что идентификаторы разные, это кажется совершенно тривиальным. Это предостережение просто превращает его из простого в легкий.
Показать ещё 2 комментария
Теги:

4 ответа

1

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

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

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

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

$row.find('input').val('')
Поделиться
  • 0
    Я никогда не знаю, ABT клон .. спасибо за это.
1

Две вещи:

Семантика - используйте <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():

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

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

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.

Поделиться
0

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

$(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">
Поделиться
  • 0
    показывает неопределенный
0

Вы можете попробовать следующее:

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

Сценарий: http://jsfiddle.net/T88k7/4/

Поделиться
  • 1
    Почему за это тоже проголосовали?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню