JavaScript dom에서 트리 구조를 만드는 방법?

StackOverflow https://stackoverflow.com/questions/1417940

  •  07-07-2019
  •  | 
  •  

문제

이것은 너무 어리석은 / 너무 기본적으로 들릴 것입니다 - 죄송합니다. 그러나 나는 많이 실험했고 올바른 솔루션에 올 수 없었습니다!

이 다음 코드를 사용하고 있습니다. 불행히도, 위아래의 움직임은 페이지 전체에서 멈추지 않고 계속됩니다! :)

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>

위에서 설명한 것처럼 이것은 작동하지만 위와 아래의 움직임은 멈추지 않습니다. 다른 P 태그와 DIV 태그에서 XSL : For-Each를 동봉하려고 시도했지만 작동하지 않았습니다. 나는이 P 태그의 부모를 바디 태그 이외의 다른 것으로 갖기 위해 노력하고있었습니다.

내가 분명하게 만들었나요?

아래에 추가 된 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는 PS 목록이 양식 태그의 첫 번째 자식. 이것은 바디 태그에 직접 인접 해 있기 때문에 사실상 페이지 위로 이동하는 것입니다.

편집 : Ok, 귀하의 의견에서, 다른 형제 자매가 있고 P 태그가있는 경우 과거를 이동시키지 않는 P 태그에 이르면 어떻게 든 표시하고 그 한계에 순종하기 위해 위/다운 기능을 변경해야합니다. ... 같은 ...

...<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);
  }
};

하한에 대해서도 유사한 제한이 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top