how to get the row index and send it as a parameter to javascript function

Question

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

2 revs user1106925 · Accepted Answer · 2012-01-15 06:05:40Z

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

edited Jan 15, 2012 at 6:05

community wiki

2 revs
user1106925

Sign up to request clarification or add additional context in comments.

4 Comments

nithin Over a year ago

i'm using 2 JS methods moveUp and moveDown associated wit 2 buttons up and down. on click of up i need to get rowIndex of the row and send it to moveUp method

user1106925 Over a year ago

@nithin: I'm not going to guess what your code looks like. Edit your question to include all the relevant details needed to answer your question, including a representation of the actual HTML structure, and I'll update my answer.

nithin Over a year ago

i've edited the q'n to fit the actual need, sorry for inconvenience

nithin Over a year ago

i tried using ur logic, but i'm unable to perform the swap operation, i get the rowindex as 0 > i've posted the completed code which i used

Collectives™ on Stack Overflow

how to get the row index and send it as a parameter to javascript function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related