这听起来太愚蠢/太基础了 - 对此感到抱歉，但我尝试了很多，但无法找到正确的解决方案!
我正在使用下面的代码 - 它使一行文本字段上下移动。不幸的是，上下运动并没有停止，而是在整个页面中持续进行! :)
function up(row) {
// need to stop somewhere
var prevRow = row.previousSibling;
if(prevRow != null) {
row.parentNode.insertBefore(row, prevRow);
}
};
function down(row) {
// need to stop somewhere as well
var nextRow = row.nextSibling;
row.parentNode.insertBefore(row, nextRow.nextSibling);
};
我生成的html是xml和xsl的组合。 XSL 看起来像这样:
<xsl:for-each select=".../...">
<p>
<button type="button" onclick="up(this.parentNode)">Up</button>
<button type="button" onclick="down(this.parentNode)">Down</button>
<input>
...
...
...
</p>
</xsl:for-each>
如上所述，这是有效的，但上下运动不会停止。我尝试将 xsl:for-each 包含在另一个 p 标签和 div 标签中，但都不起作用。我试图将这些 p 标签的父标签作为 body 标签之外的其他标签。
我说清楚了吗？
<小时/>生成的 HTML 添加如下:
<html>
<head>
<script>
function up(row) {
...
};
function down(row) {
...
};
</script>
</head>
<body>
<form name="edit_form" action="edit.php" method="POST">
...
<?xml version="1.0"?>
...
<p>
<button type="button" onclick="up(this.parentNode)">Up</button>
<button type="button" onclick="down(this.parentNode)">Down</button>
<input name="CRorder[record10354881]" type="text" value="0" disabled="" size="4"/>
<input name="CRpreference[record10354881]" type="text" value="10" disabled="" size="4"/>
<input name="CRlabel[record10354881]" type="text" value="label1"/><input name="CRvalue[record10354881]" type="text" value="22222222222"/></p>
<p><button type="button" onclick="up(this.parentNode)">Up</button>
<button type="button" onclick="down(this.parentNode)">Down</button>
<input name="CRorder[record10354882]" type="text" value="1" disabled="" size="4"/>
...
...
</form></body>
</html>
最佳答案
根据您的 HTML，假设 ...s 不包含使 P 成为子项的匹配标签对，则包含向上/向下按钮(和其他辅助工具)的 P 将在 P 列表中向上移动直到它是 FORM 标记的第一个子标记。由于它与 BODY 标记直接相邻，因此实际上将其在页面上一直向上移动。
编辑:好的，根据您的评论，如果您有 P 标签的其他 sibling ，但您不想将它们移过去，则需要以某种方式标记它们并更改您的向上/向下功能以遵守这些限制。类似...
...<tag id="upperLimit">...
function up(row) {
// need to stop somewhere
var prevRow = row.previousSibling;
if(prevRow != null && prevRow != document.getElementById("upperLimit")) {
row.parentNode.insertBefore(row, prevRow);
}
};
对下限也有类似的限制。
关于javascript - 如何在 Javascript DOM 中创建树结构？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1417940/