Javascript 克隆tr时，它将显示在顶部，而不是定义的tr的位置

我的tr在表标记中定义如下：

<table>
  <tr>
    <td>
      <input type="text" name="customerid">
    </td>
  </tr>
  <tr>
    <td>
      <div id="stlineitems">
        <label for="stlineitems">Item(s)</label>
    </td>
    <td>
      <div class="onlyleft">
        <select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
          <option></option>
        </select>
      </div>
      <div class="moveboxleft">
        <input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
      </div>
      <br/>
      <div class="nextitem"><a href="javascript:void(0);" class="createNewItemTag">New Item</a>
      </div>
    </td>
  </tr>
</table>

试试下面的代码

使用

obj.parents（'table'）.find（“tr:eq（0）”）.after（clonedObj）

而不是

obj.parents（'table'）.append（clonedObj）


$（'.createNewItemTag'）。单击（函数（）{
var obj=$（this.parents（'tr'）.first（），
clonedObj=$（obj[0].outerHTML）；
clonedObj.find（“.select2容器”）.remove（）；
clonedObj.find（'.createNewItemTag'）.remove（）；
clonedObj.find（'td'）.last（）.append（“”）；
clonedObj.find（“.removietem”）。单击（函数（）{
$（this.parents（'tr'）.first（）.remove（）；
});
//控制台日志（obj）；
obj.parents（'table'）.find（'tr:eq（0）”）.after（clonedObj）；
//initSelect2ForNextItem（clonedObj.find（“.selectItemsList”）.first（））；
});

项目


尝试下面的代码

使用
obj.parents（'table'）.find（“tr:eq（0）”）.after（clonedObj）
而不是
obj.parents（'table'）.append（clonedObj）


$（'.createNewItemTag'）。单击（函数（）{
var obj=$（this.parents（'tr'）.first（），
clonedObj=$（obj[0].outerHTML）；
clonedObj.find（“.select2容器”）.remove（）；
clonedObj.find（'.createNewItemTag'）.remove（）；
clonedObj.find（'td'）.last（）.append（“”）；
clonedObj.find（“.removietem”）。单击（函数（）{
$（this.parents（'tr'）.first（）.remove（）；
});
//控制台日志（obj）；
obj.parents（'table'）.find（'tr:eq（0）”）.after（clonedObj）；
//initSelect2ForNextItem（clonedObj.find（“.selectItemsList”）.first（））；
});

项目


像这样的东西


$（document）.on（'click'，'createNewItemTag'，function（）{
var rw=$（this.parents（'tr'）；
var ix=rw.index（）+1；//删除+1以插入当前行上方
var obj=rw.clone（）；
obj.addClass（'newcol'）。find（'td:first child'）。text（'newitem'）；
$（'table tr:nth child（'+ix+'））。在（obj）之后；
});
表{边框折叠：折叠；}
th，td{border:1px solid#ccc；}
.newcol td{背景色：淡绿色；}

项目
选项在这里


像这样的东西


$（document）.on（'click'，'createNewItemTag'，function（）{
var rw=$（this.parents（'tr'）；
var ix=rw.index（）+1；//删除+1以插入当前行上方
var obj=rw.clone（）；
obj.addClass（'newcol'）。find（'td:first child'）。text（'newitem'）；
$（'table tr:nth child（'+ix+'））。在（obj）之后；
});
表{边框折叠：折叠；}
th，td{border:1px solid#ccc；}
.newcol td{背景色：淡绿色；}

项目
选项在这里


如果我理解您的问题，您希望在带有“new item”标记的元素之前添加新克隆的
元素

我们要做的是利用jQuery内置的
.clone（）
方法，而不是自己做。一旦我们有了克隆对象，我们将使用现有代码删除新项按钮并添加删除按钮

完成后，我们将利用jQuery的
.before（）
方法在原始对象之前插入新的克隆元素。（如果希望将其插入原始对象之后，可以使用
.after（）
）


$（'.createNewItemTag'）。单击（函数（）{
var obj=$（this.parents（'tr'）.first（）；
var clonedObj=obj.clone（）；
clonedObj.find（“.select2容器”）.remove（）；
clonedObj.find（'.createNewItemTag'）.remove（）；
clonedObj.find（'td'）.last（）.append（“”）；
clonedObj.find（“.removietem”）。单击（函数（）{
$（this.parents（'tr'）.first（）.remove（）；
}); 
之前的对象（克隆对象）；
});

项目


如果我理解您的问题，您希望在带有“new item”标记的元素之前添加新克隆的
元素

我们要做的是利用jQuery内置的
.clone（）
方法，而不是自己做。一旦我们有了克隆对象，我们将使用现有代码删除新项按钮并添加删除按钮

完成后，我们将利用jQuery的
.before（）
方法在原始对象之前插入新的克隆元素。（如果希望将其插入原始对象之后，可以使用
.after（）
）


$（'.createNewItemTag'）。单击（函数（）{
var obj=$（this.parents（'tr'）.first（）；
var clonedObj=obj.clone（）；
clonedObj.find（“.select2容器”）.remove（）；
clonedObj.find（'.createNewItemTag'）.remove（）；
clonedObj.find（'td'）.last（）.append（“”）；
clonedObj.find（“.removietem”）。单击（函数（）{
$（this.parents（'tr'）.first（）.remove（）；
}); 
之前的对象（克隆对象）；
});

项目


元素不包含
。请选择2 container
元素您是否可以提供JSFIDLE链接？不清楚是什么问题
append（）
将克隆放在底部。需要完整解释您希望这段代码做什么您的表结构是错误的。您的div从一个td单元开始，并跨越到其他一些单元。如果你能告诉我你到底想要多大的HTML标记
$('.createNewItemTag').click(function(){
    var obj = $(this).parents('tr').first(),
    clonedObj = $(obj[0].outerHTML);
    clonedObj.find(".select2-container").remove();
    clonedObj.find('.createNewItemTag').remove();
    clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
    clonedObj.find(".removeItem").click(function(){
        $(this).parents('tr').first().remove();
    }); 
    console.log(obj);
    obj.parents('table').append(clonedObj);
    initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});