2012-01-15 6 views
2

일부 행이있는 간단한 html 파일을 사용하고 있습니다. 클릭 한 행의 rowindex를 가져 와서 매개 변수로 보내야합니다. 내 사용자 정의 자바 스크립트 메서드. 나는 gridview 또는 jquery를 사용하지 않을 것이다. 사용자가 클릭 내가 그것의 rowIndex에 얻을 몇 가지 변수에 저장 내 JS 방법에 보낼 필요가 ROW1 경우행 인덱스를 얻는 방법 및 JavaScript 함수에 매개 변수로 보내기

내 HTML은 지금이

<html> 
<head> 
<body> 
<form name="myForm"> 

<table id="mainTable" border="1" width="100%"> 

    <script> 
    document.write('<tr>') 
    document.write('<td>') 
    document.write('row1') 
    document.write('</td>') 
    document.write('</tr>') 

    document.write('<tr>') 
    document.write('<td>') 
    document.write('row2') 
    document.write('</td>') 
    document.write('</tr>') 
    document.write('</table>') 

    document.write('<table>') 
    document.write('<tr>') 
    document.write('<td>') 
    document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')> 
    document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')> 
    document.write('</td>') 
    document.write('</tr>') 
    document.write('</table>') 
</script> 
</table> 

</form> 
</body> 
</head> 
</html> 
<script> 
var mainTable = document.getElementById("mainTable"); 
function getRowIndex(el) 
{ 
while((el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr'); 

    if(el) 
     alert(el.rowIndex); 
     return el.rowIndex; 
} 

function swapRowUp(chosenRow) { 
if (chosenRow.rowIndex != 0) { 
    moveRow(chosenRow, chosenRow.rowIndex-1); 
} 
} 
function swapRowDown(chosenRow) { 
if (chosenRow.rowIndex != mainTable.rows.length-1) { 
    moveRow(chosenRow, chosenRow.rowIndex+1); 
} 
} 

function moveRow(targetRow, newIndex) { 
if (newIndex > targetRow.rowIndex) { 
    newIndex++; 
} 

var mainTable = document.getElementById('mainTable'); 

var theCopiedRow = mainTable.insertRow(newIndex); 


for (var i=0; i<targetRow.cells.length; i++) { 
    var oldCell = targetRow.cells[i]; 
    var newCell = document.createElement("TD"); 
    newCell.innerHTML = oldCell.innerHTML; 
    theCopiedRow.appendChild(newCell); 
    copyChildNodeValues(targetRow.cells[i], newCell); 
} 
//delete the old row 
mainTable.deleteRow(targetRow.rowIndex); 
} 


function copyChildNodeValues(sourceNode, targetNode) { 
for (var i=0; i < sourceNode.childNodes.length; i++) { 
    try{ 
    targetNode.childNodes[i].value = sourceNode.childNodes[i].value; 
    } 
    catch(e){ 

    } 
} 
} 

</script> 

같은 것입니다. 그래서 내가 어떻게 할 수 있니?

이것은 내가 사용한 코드의 전체 집합이지만 행을 바꿀 수 없습니다. 내가

답변

2

<tr>에 핸들러를 제거하고 <input> 패스 인수로 this을하기에 null cellIndex ...

document.write('<input type="button" value=" move UP " onClick="swapRowUp(this)"</input>')> 
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(this)"</input>')> 

그때까지 조상을 가로 지르는 함수를 만들 받고 있어요 tr는 ...

function getRowIndex(el) { 
    while((el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr'); 

    if(el) 
     return el.rowIndex; 
} 

에 도달 그리고 당신의 swapRowUpswapRowDown 기능은 얻을 getRowIndex를 호출해야한다 색인.

function swapRowUp(button) { 
    var idx = getRowIndex(button); 
} 
function swapRowDown(button) { 
    var idx = getRowIndex(button); 
} 

아니면 인라인 처리기에서 직접 인덱스를 통과해야하는 경우, 단지 getRowIndex() 호출 인라인을 배치 ...

document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')> 
document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')> 

그리고 당신의 기능받는 인덱스가 ...

function swapRowUp(idx) { 
    alert(idx); 
} 
function swapRowDown(idx) { 
    alert(idx); 
} 
+0

2 개의 JS 메서드 moveUp 및 moveDown과 관련된 위젯 2 단추를 위아래로 사용하고 있습니다. 클릭에 내가 행의 rowIndex를 얻고 moveUp 메서드로 보내야한다. – nithin

+0

@nithin : 나는 당신의 코드가 어떻게 생겼는지 짐작하지 않을 것이다. 질문을 수정하여 실제 HTML 구조의 표현을 포함하여 질문에 대답하는 데 필요한 모든 관련 세부 정보를 포함하면 답변을 업데이트 할 것입니다. –

+0

실제 필요에 맞게 q'n을 편집했습니다. 불편을 끼쳐 드려 죄송합니다. – nithin

관련 문제