如何在原型1.5.1中移动/缩小兄弟元素的顺序？

Question

我正在尝试设置一个函数，允许在表单中移动表格行的“向上”和“向下”。表行数是动态的 - 用户可以点击按钮添加其他行。每个表行中有多个字段。有一个带有不同类名的标题行和页脚行，因此检查hasClassName。

我首先成功编写了这个函数，以便与Prototype 1.6一起使用，然后才意识到我需要它与1.5.1版一起使用。当时间可用于测试时，我们将升级到最新版本的Prototype，但我需要在我们项目的当前版本下工作。

主要问题是在1.5中你不能只插入一个元素作为插入的内容。这意味着我需要要插入的元素的HTML。这就产生了这样的问题：当我访问元素的HTML（变量“insertHTML”）时，这是原始HTML，并且不包括用户输入相关表单元素的信息。

非常感谢任何帮助。

moveDataDef: function(num, dir) {
    var targRow = $('dataDefItem'+num);
    var content = targRow.innerHTML;
    var siblings;
    var insertHTML = targRow.inspect() + targRow.innerHTML + '</tr>';

    if(dir == 'up')
        siblings = targRow.previousSiblings();
    else
        siblings = targRow.nextSiblings();

    if (siblings[0].hasClassName('dataDefItem')) {
        targRow.remove();
        if(dir == 'up')
            new Insertion.Before(siblings[siblings.length - 1].id, targRow);
        else
            new Insertion.After(siblings[0].id, targRow);
    }
}

Answer 1

我想，您可以使用此代码的一部分来替换较低的if块。它使用原生DOM功能，即 insertBefore（）：

if (siblings[0].hasClassName('dataDefItem')) {
  var targetParent = targRow.parentNode;
  var sibling = siblings[0];

  if(dir == 'up'){
    targRow.remove();
    targetParent.insertBefore(targRow, sibling);
  } else {
    sibling.remove();
    targetParent.insertBefore(sibling, targRow);
  }
}

供您参考，如果您有兴趣，这是我的POC代码：

<table id="tb1">
<tbody>
<tr id="tr1"><td>1</td></tr>
<tr id="tr2"><td>2</td></tr>
<tr id="tr3"><td>3</td></tr>
</tbody>
</table>

<script type="text/javascript">
/* <![CDATA[ */
(function(){
var trr3 = $('tr3');
var tp = trr3.parentNode; 
var trr1 =trr3.previousSiblings();
trr3.remove();
tp.insertBefore(trr3, trr1[0]);
})();
/* ]]> */
</script>

感谢。

更新：修正拼写错误（缺少'{'和'}'）。