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

将行上的ID更改为类，因为ID必须是唯一的：

在页面加载时可以复制一行并存储它：

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('')

Answer 2

两件事：

语义 - 使用<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的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（考虑用户体验）。

最大的好处是您无需在JavaScript中嵌入任何HTML。您甚至可以使用CSS隐藏第一行并将其用作模板，仅此而已。您可能还想查看insertBefore。

Answer 3

你可以试试这个：

$("#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/

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