Daniel Daniel - 5 months ago 14
Javascript Question

cloning a tr and it is appearing at the top instead of at the placement of the tr defined

my tr is defined inside the table tag like this:

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


Now, i am using the following snippet to create the cloned above code, all work but the placement is not right, i want it to be creating underneath the
tr
tag before this
<div class="nextitem">
tag, not sure what i am doing wrong here

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

If I understand your question, you want new cloned <tr> elements to be added BEFORE the element with the "new item" tag.

What we are going to do is utilize jQuery's built in .clone() method instead of doing it ourself. Once we have the cloned object we use your existing code to remove the New Item button and add the Remove button.

After we do that we'll utilize jQuery's .before() method to insert the new, cloned element before the original object. (You could use .after() if you wanted this to be inserted after the original object)

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

You may also want to clear the inputs of the original object so that it is empty after the clone is created. (or clear the inputs of the cloned object, up to you).

References:

Comments