CODEWITHSUNDEEP
javascriptprototype
OSOMAN
OSOMAN

Reputation: 47

Insert tr on a specific position using Prototype JS

I have the following part of a table:

<tbody class="tbody">
    <tr id="el1"></tr>
    <tr id="el2"></tr>
    <tr id="el3"></tr>
</tbody>
<tbody class="cloneTbody">
     <tr class="cloneTr"></tr>
</tbody>

I want to hide one <tr id="el2"></tr> from <tbody class="tbody"> and create a clone of <tr class="cloneTr"> over him. By default tdoby with class 'cloneTbody' is hidden. I am using Prototype JS and i've been created the following function:

ObjectWork.hideTr = function(tr){
  var trClone = ObjectWork.container.down('table#table tbody.cloneTbody > tr.cloneTr').clone(true);
  // get tr next element
  var nextTr = tr.next(0);

   if (nextTr) {
      // i want to insert tr from clone in the same place where paramenter was
   }
   else {
     tr.up('tbody.tbody').insert({
        'bottom': trClone
     });
   }

   // hide tr
  tr.hide();

}

The workflow is the following: if requested tr which will be hide is the last one of tbody insert clone tr at the bottom of tbody, else try to insert clone tr on the same position of requested tr.

Thank you!

Upvotes: 0

Views: 186

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

You can try insert...after like

tr.insert({
    'after': trClone
});


var ObjectWork = {
  container: $(document.body)
};
ObjectWork.hideTr = function(tr) {
  var trClone = ObjectWork.container.down('table#table tbody.cloneTbody > tr.cloneTr').clone(true);
  // get tr next element
  var nextTr = tr.next(0);

  if (nextTr) {
    tr.insert({
      'after': trClone
    });
  } else {
    tr.up('tbody.tbody').insert({
      'bottom': trClone
    });
  }

  // hide tr
  tr.hide();

}

ObjectWork.hideTr($('el1'))
.cloneTbody {
  display: none;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.2/prototype.js"></script>
<table id="table">
  <tbody class="tbody">
    <tr id="el1"><td>1</td></tr>
    <tr id="el2"><td>2</td></tr>
    <tr id="el3"><td>3</td></tr>
  </tbody>
  <tbody class="cloneTbody">
    <tr class="cloneTr"><td>clone</td></tr>
  </tbody>
</table>

Upvotes: 1

Related Questions