Question

我有这个包含输入字段的表单。如果可能，我想克隆具有不同id或名称的元素。

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="col-md-2">Item Name</th>
                        <th class="col-md-2">Quantity</th>
                        <th class="col-md-2">Rate</th>
                        <th class="col-md-2">Discount</th>
                        <th class="col-md-2">Tax %</th>
                        <th class="col-md-2">Amount</th>
                    </tr>
                </thead>
                <tbody id="tbody-row">
                    <tr id="items-row">
                        <td>
                            <div class="input-group">

                                <input type="text" name="Inv_Itemsdetail" value="" class="Itemsdetail-typeahead" autocomplete="on" data-provide="typeahead" />
                                <input type="hidden" id="Inv_Itemsdetail" />
                                <span class="input-group-btn">
                                    <a href="#" data-toggle="modal" class="btn btn-primary" data-target="#cardCode05"><i class="fa fa-plus"></i></a>

                                </span>
                            </div>
                        </td>
                        <td>@Html.TextBoxFor(m => m.quantity, new { @Class = "form-control", min = "1", id = "txtqty", type = "number" })</td>
                        <td>@Html.TextBoxFor(m => m.rate, new { @Class = "form-control", id = "txtrate", disabled = "disabled" })</td>
                        <td>@Html.TextBoxFor(m => m.discount, new { @Class = "form-control", id = "txtdiscount" })</td>
                        <td>
                            <div class="input-group">

                                <input type="text" name="Inv_Taxes" value="" class="Taxes-typeahead" autocomplete="on" data-provide="typeahead" />
                                <input type="hidden" id="Inv_Taxes" />
                                <span class="input-group-btn">
                                    <a href="#" data-toggle="modal" data-target="#Modalterm" class="btn btn-primary"><i class="fa fa-plus"></i></a>
                                </span>

                            </div>
                        </td>
                        <td>@Html.TextBoxFor(m => m.Amount, new { @Class = "form-control", id = "txtamt", disabled = "disabled" })</td>
                    </tr>



            </table>

我已经为此行指定了一个id，并且能够生成此行元素的不同id。但是当我想要更改此行中文本框的id时，问题恰好是真的。

的jQuery -

 <script type="text/javascript">
            $(function () {
                $('#add-item').click(function () {
                    var num = Math.floor(Math.random() * 90000) + 10000;
                    var $itemrow = $('#items-row>td>.Itemsdetail-typeahead');
                    $itemrow.attr('class', 'autocomplete' + num);
                    $('#items-row').clone().attr("Id", "row_" + num).appendTo('#tbody-row');


                });
            });

        </script>

在这里，您可以看到克隆正在行元素上进行，而不是在此行下的输入文本框中进行。我想克隆此行中每个元素的不同id。

我该怎么做？

Answer 1

$('#items-row').clone()

默认情况下（ false ）将使用其属性克隆整个元素。

检查.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )的定义。

所以将其改为

$('#items-row').clone(true, true);
$('#items-row').prop('id', "row_" + num);

Answer 2

首先，您是随机生成新的ID？我建议你这样做

// simply get the last tr index and icrease it
var num = $('.table-bordered tbody tr:last-child').index() + 1;

其次，您的可见input元素没有ID，所以我想您想在hidden inputs上执行此操作？您可以将此代码放在克隆行之后

$('.table-bordered tbody tr:last-child input[id=Inv_Itemsdetail]').attr("id","Inv_Itemsdetail_" + num);
$('.table-bordered tbody tr:last-child input[id=Inv_Taxes]').attr("id","Inv_Taxes" + num);

jquery克隆与不同的id元素

2 个答案: