CODEWITHSUNDEEP
javascriptjquery
user6509232
user6509232

Reputation:

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

Upvotes: 0

Views: 67

Answers (3)

TheZanke
TheZanke

Reputation: 1078

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:

Upvotes: 3

cssyphus
cssyphus

Reputation: 40076

Something like this?

$(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);
});
table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}
.newcol td{background-color:palegreen;}
<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>

Notes:

(1) Switched to using .on() to allow newly added rows to be cloned

Upvotes: 0

zakhefron
zakhefron

Reputation: 1443

Try below code

Use obj.parents('table').find("tr:eq(0)").after(clonedObj); instead of obj.parents('table').append(clonedObj);

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

Js Fiddle Demo : JSFiddle

Upvotes: 0

Related Questions