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

Insert tr on a specific position using Prototype JS

本文关键字：位置 插入 tr 定位 Prototype JS 使用      更新时间：2023-09-26

我有一个表的以下部分:

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

我想从<tbody class="tbody">中隐藏一个<tr id="el2"></tr>，并在他上面创建一个<tr class="cloneTr">的克隆。默认情况下，带有'cloneTbody'类的doby是隐藏的。我使用的是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是body的最后一个，则在body的底部插入克隆tr，否则尝试在请求tr的相同位置插入克隆tr。

谢谢!

您可以尝试插入…后像

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>

相关文章：