Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
71
rated 0 times [  74] [ 3]  / answers: 1 / hits: 15374  / 13 Years ago, sun, january 15, 2012, 12:00:00

i'm using a simple html file with some rows in it, i need to get the rowindex of the clicked row and send it as parameter to one of my custom javascript methods.
I wont be using any gridview or jquery.



my html would be something like this



<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>


now if user clicks row1 i need to get rowindex of it, store it in some variable and send it to my JS methods. so how can i do it ?



this is the complete set of code i used, but i'm unable to swap the rows.
i'm getting the cellIndex as null


More From » html

 Answers
2

Get rid of the handler on the <tr>, and have the <input> pass this as the argument...



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


Then create a function that traverses the ancestors until the tr is reached...



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

if( el )
return el.rowIndex;
}


And have your swapRowUp and swapRowDown functions call getRowIndex to get the index.



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





Or if you must pass the index directly from the inline handler, just place the getRowIndex() call inline...



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>')>


And have your functions receive the index...



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

[#88012] Friday, January 13, 2012, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
brynn

Total Points: 448
Total Questions: 83
Total Answers: 118

Location: Albania
Member since Sun, Nov 22, 2020
4 Years ago
brynn questions
Wed, Sep 22, 21, 00:00, 3 Years ago
Wed, Dec 23, 20, 00:00, 4 Years ago
Wed, Aug 12, 20, 00:00, 4 Years ago
;