javascript - 使用 Prototype JS 在特定位置插入 tr

Question

我有表格的以下部分:

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

我想隐藏一个<tr id="el2"></tr>来自<tbody class="tbody">并创建 <tr class="cloneTr"> 的克隆在他之上。默认情况下，类“cloneTbody”的 tdoby 是隐藏的。我正在使用 Prototype JS，并且创建了以下函数:

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

}

工作流程如下:如果要隐藏的请求 tr 是 tbody 的最后一个，则在 tbody 底部插入克隆 tr，否则尝试将克隆 tr 插入到请求的 tr 的相同位置。

谢谢!

Answer 1

您可以尝试在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>