Question

我的tr在table标签内定义如下：

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

现在，我使用以下代码片段来创建克隆的上述代码，但所有工作都有效，但展示位置不正确，我希望在此tr代码之前的<div class="nextitem">代码下创建代码，不知道我在这里做错了什么

$('.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());
});

Answer 1

如果我理解了您的问题，您希望在元素之前添加新的克隆<tr>元素＆＃34; new item＆＃34;标签

我们要做的是利用jQuery内置的.clone()方法，而不是自己做。获得克隆对象后，我们使用现有代码删除 New Item 按钮并添加删除按钮。

在我们这样做之后，我们将利用jQuery的.before()方法在原始对象之前插入新的克隆元素。（如果您希望在原始对象之后插入它，可以使用.after()

＆＃13;

$('.createNewItemTag').click(function(){
    var obj = $(this).parents('tr').first();
    
    var clonedObj = obj.clone();
    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();
    }); 

    obj.before(clonedObj);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" name="customerid">
    </td>
  </tr>
  <tr>
    <td>
      <div id="stlineitems">
        <label for="stlineitems">Item(s)</label>
      </div>
    </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>

＆＃13;

您可能还希望清除原始对象的输入，以便在创建克隆后将其设置为空。（或清除克隆对象的输入，由您决定。）

参考文献：

Answer 2

尝试以下代码

使用obj.parents('table').find("tr:eq(0)").after(clonedObj);代替obj.parents('table').append(clonedObj);

＆＃13;

$('.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').find("tr:eq(0)").after(clonedObj);
  //initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Js Fiddle演示：JSFiddle

Answer 3

这样的东西？

＆＃13;

$(document).on('click', '.createNewItemTag', function() {
  var rw = $(this).parents('tr');
  var ix = rw.index() +1; //remove +1 to insert above curr row
  var obj= rw.clone();
  obj.addClass('newcol').find('td:first-child').text('New Item');
  $('table tr:nth-child('+ix+')').after(obj);
});

＆＃13;

table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}
.newcol td{background-color:palegreen;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr>
    <td colspan="2"><input type="text" value="customerid"></td>
  </tr>
  <tr>
    <td>
      <div id="stlineitems"><label for="stlineitems">Item(s)</label></div>
    </td>
    <td>
      <div class="onlyleft">
        <select>
          <option>Options go here</option>
        </select>
      </div>
      <div class="moveboxleft">
        <input type="text" value="Provide Rate" />
      </div>
      <br/>
      <div class="nextitem"><a href="javascript:void(0);" class="createNewItemTag">New Item</a>
      </div>
    </td>
  </tr>
</table>

＆＃13;

注意：

（1）切换到使用.on()以允许克隆新添加的行

克隆tr并且它出现在顶部而不是定义的tr的位置

3 个答案: