By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,527 Members | 1,210 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,527 IT Pros & Developers. It's quick & easy.

swapping the rows of a table

P: 1
I've number of rows, i need to take the rowindex of the selected row and pass it as parameter to swapUp or swapDown methods which are called when user selects a row and clicks on Up or Down button

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <body>
  4. <form name="myForm">
  5.  
  6.  <table id="mainTable" border="1" width="100%">
  7.  
  8.    <script>
  9.      document.write('<tr>')
  10.      document.write('<td>')
  11.      document.write('row1')
  12.      document.write('</td>')
  13.      document.write('</tr>')
  14.  
  15.      document.write('<tr>')
  16.      document.write('<td>')
  17.      document.write('row2')
  18.      document.write('</td>')
  19.      document.write('</tr>')
  20.      document.write('</table>')
  21.  
  22.      document.write('<table>')
  23.      document.write('<tr>')
  24.      document.write('<td>')
  25.      document.write('<input type="button" value=" move UP " onClick="swapRowUp(getRowIndex(this))"</input>')>
  26.      document.write('<input type="button" value="move DOWN" onClick="swapRowDown(getRowIndex(this))"</input>')>
  27.      document.write('</td>')
  28.      document.write('</tr>')
  29.      document.write('</table>')
  30. </script>
  31.  </table>
  32.  
  33. </form>
  34. </body>
  35. </head>
  36. </html>
  37. <script>
  38. var mainTable = document.getElementById("mainTable"); 
  39. function getRowIndex(el)
  40. {
  41. while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );
  42.  
  43.    if( el ) 
  44.         alert(el.rowIndex);
  45.         return el.rowIndex;
  46. }
  47.  
  48. function swapRowUp(chosenRow) {
  49.  if (chosenRow.rowIndex != 0) {
  50.    moveRow(chosenRow, chosenRow.rowIndex-1); 
  51.  }
  52. function swapRowDown(chosenRow) {
  53.  if (chosenRow.rowIndex != mainTable.rows.length-1) {
  54.    moveRow(chosenRow, chosenRow.rowIndex+1); 
  55.  }
  56.  
  57. function moveRow(targetRow, newIndex) {
  58. if (newIndex > targetRow.rowIndex) {
  59.    newIndex++; 
  60.  }
  61.  
  62.  var mainTable = document.getElementById('mainTable'); 
  63.  
  64.  var theCopiedRow = mainTable.insertRow(newIndex); 
  65.  
  66.  
  67.  for (var i=0; i<targetRow.cells.length; i++) {
  68.    var oldCell = targetRow.cells[i]; 
  69.    var newCell = document.createElement("TD"); 
  70.    newCell.innerHTML = oldCell.innerHTML; 
  71.    theCopiedRow.appendChild(newCell); 
  72.    copyChildNodeValues(targetRow.cells[i], newCell);
  73.  } 
  74. //delete the old row 
  75.  mainTable.deleteRow(targetRow.rowIndex); 
  76.  
  77.  
  78. function copyChildNodeValues(sourceNode, targetNode) {
  79.  for (var i=0; i < sourceNode.childNodes.length; i++) {
  80.    try{
  81.      targetNode.childNodes[i].value = sourceNode.childNodes[i].value;
  82.    }
  83.    catch(e){
  84.  
  85.    }
  86.  }
  87. }
  88.  
  89. </script>
  90.  
this is the code i've written, but its not working.
can anybody help me out
Jan 15 '12 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
it may not work due to the many HTML errors.
Jan 15 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.