swapping rows using a javascript

Question

I've a multiple number of rows which is generated by a for condition, with 2 icons up and down. On click of up the selected row should move one step up, and on click of down the selected row should move one step down

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

i'm unable to perform the swap operation, i get cellIndex as null

Deleting your question after it got downvoted (stackoverflow.com/questions/8861893/…) and asking the same question really isn't the way to go. As I said before, show us what you've tried so far - "please write all my code for me" questions tend to get frowned on here =) — Rob
– Rob, Commented Jan 14, 2012 at 15:02

Raynos · Accepted Answer · 2012-01-14 12:01:33Z

14

You can use some sensible JavaScript

up.addEventListener("click", function moveRowUp() {
    var row = this.parentNode.parentNode,
        sibling = row.previousElementSibling,
        parent = row.parentNode;

    parent.insertBefore(row, sibling);
});

for some sensible HTML

<table>
    <tbody>
        <tr> 
            <td> 1 </td> 
            <td> filler </td> 
        </tr>
        <tr> 
            <td> 2 </td> 
            <td> <button id="up">up</button> </td> 
        </tr>
    </tbody>
</table>

Live Example

edited Jan 14, 2012 at 12:01

answered Jan 14, 2012 at 11:52

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

5 Comments

Rob W Over a year ago

Are two replaceChild operations faster than one insertBefore operation..?

ThiefMaster Over a year ago

The third argument of addEventListener is not optional in some less-recent-but-not-ancient browsers.

Raynos Over a year ago

@RobW two replaceChild operations don't actually work. I like your single insertBefore that's very elegant.

Raynos Over a year ago

@ThiefMaster Meh legacy browser compliance, if your going to do it, do it properly, also handle emulating DOM2 events in IE, and handle previousElementSibling. The only browser you should care about where addEventListener fails without the third argument is FF3.6

Raynos Over a year ago

@ClarkeyBoy no, don't clone the dom node, that's a waste of computation :\. Besides I already fixed it so it uses a single insertBefore

Collectives™ on Stack Overflow

swapping rows using a javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related