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 insert clone tr的最后一个，否则尝试在请求的tr的相同位置插入clone tr。

谢谢！

Answer 1

你可以尝试插入...之后像

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>

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

1 个答案: