CODEWITHSUNDEEP
javascripthtml
nithin
nithin

Reputation: 387

swapping rows using a javascript

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

Upvotes: 6

Views: 15940

Answers (1)

Raynos
Raynos

Reputation: 169391

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

Upvotes: 14

Related Questions