473,320 Members | 1,896 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to swap content of rows of a table

254 100+
Hi

I want to swap the content of rows up or down based on the corresponding button clicked.

Expand|Select|Wrap|Line Numbers
  1. <table  border="0" width="200">
  2. <tr>
  3.  <td>first name </td><td>last name</td><td colspan="2">Move</td>
  4.  </tr>
  5.  <tr>
  6.  <td>mukesh </td><td>kumar</td><td><input type="button"  value="up"/></td><td><input type="button"  value="down"/></td>
  7.  </tr>
  8.  <tr>
  9.  <td>jay </td><td>vishal</td><td><input type="button"  value="up"/></td><td><input type="button"  value="down"/></td>
  10.  </tr>
  11.  <tr>
  12.  <td>rocky </td><td>martin</td><td><input type="button"  value="up"/></td><td><input type="button"  value="down"/></td>
  13.  </tr>
  14.  <tr>
  15.  <td>joe </td><td>natsukan</td><td><input type="button"  value="up"/></td><td><input type="button"  value="down"/></td>
  16.  </tr>
  17.  
  18.  </table>
How can I do that?
Dec 29 '07 #1
11 15603
dmjpro
2,476 2GB
Hi

I want to swap the content of rows up or down based on the corresponding button clicked.

Code:

<table border="0" width="200">
<tr>
<td>first name </td><td>last name</td><td colspan="2">Move</td>
</tr>
<tr>
<td>mukesh </td><td>kumar</td><td><input type="button" value="up"/></td><td><input type="button" value="down"/></td>
</tr>
<tr>
<td>jay </td><td>vishal</td><td><input type="button" value="up"/></td><td><input type="button" value="down"/></td>
</tr>
<tr>
<td>rocky </td><td>martin</td><td><input type="button" value="up"/></td><td><input type="button" value="down"/></td>
</tr>
<tr>
<td>joe </td><td>natsukan</td><td><input type="button" value="up"/></td><td><input type="button" value="down"/></td>
</tr>

</table>

How can I do that?
Take each TD references then swap their innerHTML property.
Now try some code as I said.

Debasis Jana
Dec 29 '07 #2
mukeshrasm
254 100+
Hi
I got problem while swaping the rows. This code works fine for swapping values to column. but when I modified the value to row it is not working..It gives runtime error. you may change the tr id to td id and see the change..

If some one may please find out the error or if may give sone code snippet

thanks!

Code:

[HTML]<table border="1" id="table">
<tr id="tr1" onclick="swap(1)">
<td width="21" >first</td>
</tr>
<tr id="tr2" onclick="swap(2)">
<td width="23" >second</td>
</tr>
<tr id="tr3" onclick="swap(3)">
<td width="21">third</td>
</tr>
<tr id="tr4" onclick="swap(4)">
<td width="43" >four</td>
</tr>
</table>
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />[/HTML]
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var trno = 0;
  3. var sw = false;
  4. function swap(i)
  5. {
  6. if(sw)
  7. {
  8.  
  9. var tmp = eval("tr"+i).innerHTML;
  10. eval("tr"+i).innerHTML = eval("tr"+trno).innerHTML;
  11. eval("tr"+trno).innerHTML = tmp;
  12. sw = false;
  13. }
  14. else
  15. {
  16. sw = true;
  17. trno = i;
  18. };
  19. };
  20.  
  21.  
  22. function getInnerHTML()
  23. {
  24. var rows=document.getElementById('table').getElementsByTagName('tr').length;
  25. for(i=1;i<=rows;i++)
  26. {
  27. alert(document.getElementsByTagName("td").item(*).innerHTML);
  28.  
  29. }
  30. }
  31. </script>
Dec 29 '07 #3
mukeshrasm
254 100+
Take each TD references then swap their innerHTML property.
Now try some code as I said.

Debasis Jana
Hi
Here is the code which I tried but it works while swapping the column elements but not for rows. It is giving the runtime error. You may change the tr id to td id and see the effect.

I am not able to find out the error.

Code:

[HTML]<table border="1" id="table">
<tr id="tr1" onclick="swap(1)">
<td width="21" >first</td>
</tr>
<tr id="tr2" onclick="swap(2)">
<td width="23" >second</td>
</tr>
<tr id="tr3" onclick="swap(3)">
<td width="21">third</td>
</tr>
<tr id="tr4" onclick="swap(4)">
<td width="43" >four</td>
</tr>
</table>
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />

<script type="text/javascript">
var trno = 0;
var sw = false;
function swap(i)
{
if(sw)
{

var tmp = eval("tr"+i).innerHTML;
eval("tr"+i).innerHTML = eval("tr"+trno).innerHTML;
eval("tr"+trno).innerHTML = tmp;
sw = false;
}
else
{
sw = true;
trno = i;
};
};


function getInnerHTML()
{
var rows=document.getElementById('table').getElementsB yTagName('tr').length;
for(i=1;i<=rows;i++)
{
alert(document.getElementsByTagName("td").item(*). innerHTML);

}
}
</script>[/HTML]
Dec 29 '07 #4
acoder
16,027 Expert Mod 8TB
Threads merged - please do not double post.

Also, use code tags when posting code, e.g.
[code=javascript]
Put your code here...
[/code]
Dec 29 '07 #5
mukeshrasm
254 100+
Threads merged - please do not double post.

Also, use code tags when posting code, e.g.
Expand|Select|Wrap|Line Numbers
  1. Put your code here...
  2.  

Ok, in future, I will keep the thing in my mind. So, If you may please short out my problem.
Dec 31 '07 #6
dmjpro
2,476 2GB
Ok, in future, I will keep the thing in my mind. So, If you may please short out my problem.
I am trying to write some sample code.

Expand|Select|Wrap|Line Numbers
  1. <table id = tab_id>
  2. <tr><td>value1</td><td>value2</td></tr>
  3. <tr><td>val1</td><td>val2</td></tr>
  4. </table>
  5.  

Expand|Select|Wrap|Line Numbers
  1. function swapRow()
  2. {
  3. var tab_ref = document.getElementById('tab_id');
  4. var cells_value = new Array();
  5. for(var i=0;i<tab_ref.rows[1].childNodes.length;i++)
  6.  cells_value[i] = tab_ref.rows[1].childNodes[i].innerText;
  7. for(var i=0;i<tab_ref.rows[1].childNodes.length;i++)
  8. tab_ref.rows[1].childNodes[i].innerText = tab_ref.rows[0].childNodes[i].innerText
  9. for(var i=0;i<tab_ref.rows[0].childNodes.length;i++)
  10. tab_ref.rows[0].childNodes[i].innerText = cell_value[i];
  11. }
  12.  
Try this code I think it will work.

Debasis Jana
Dec 31 '07 #7
mukeshrasm
254 100+
I am trying to write some sample code.

Expand|Select|Wrap|Line Numbers
  1. <table id = tab_id>
  2. <tr><td>value1</td><td>value2</td></tr>
  3. <tr><td>val1</td><td>val2</td></tr>
  4. </table>
  5.  

Expand|Select|Wrap|Line Numbers
  1. function swapRow()
  2. {
  3. var tab_ref = document.getElementById('tab_id');
  4. var cells_value = new Array();
  5. for(var i=0;i<tab_ref.rows[1].childNodes.length;i++)
  6.  cells_value[i] = tab_ref.rows[1].childNodes[i].innerText;
  7. for(var i=0;i<tab_ref.rows[1].childNodes.length;i++)
  8. tab_ref.rows[1].childNodes[i].innerText = tab_ref.rows[0].childNodes[i].innerText
  9. for(var i=0;i<tab_ref.rows[0].childNodes.length;i++)
  10. tab_ref.rows[0].childNodes[i].innerText = cell_value[i];
  11. }
  12.  
Try this code I think it will work.

Debasis Jana

on which event I should call the function SwapRow().
Dec 31 '07 #8
dmjpro
2,476 2GB
on which event I should call the function SwapRow().
That you will decide ...Just put a button and test it whether my code works or not.

Debasis Jana
Dec 31 '07 #9
mukeshrasm
254 100+
That you will decide ...Just put a button and test it whether my code works or not.

Debasis Jana
Hi

I tried to insert few more rows but only one 2nd row's value is swapped with first one, And it is showing one more error cell_value is undefined. Then I removed the rows then it is also showing error cell_value is undefined.

Thanks
Dec 31 '07 #10
dmjpro
2,476 2GB
Hi

I tried to insert few more rows but only one 2nd row's value is swapped with first one, And it is showing one more error cell_value is undefined. Then I removed the rows then it is also showing error cell_value is undefined.

Thanks
Show me table HTML code.Then tell me what you need here then i ll able to solve your problem ..

Debasis Jana
Dec 31 '07 #11
mukeshrasm
254 100+
Show me table HTML code.Then tell me what you need here then i ll able to solve your problem ..

Debasis Jana
Show me table HTML code.Then tell me what you need here then i ll able to solve your problem ..

Debasis Jana

In this table, for each row there are two buttons up and down for moving rows up and down. if I click first row's move up button then it should not move up but if I click others then it should work and most important the index of the every row i.e. index1 or index2 will be same means it should not move up or down only data like first row here should move.

and I want to store the modified version of table to the database based on the index of the row

Expand|Select|Wrap|Line Numbers
  1. :
  2. <form name="myForm">
  3.  
  4.  <table id="mainTable" border="1">
  5.  
  6.    <tr name="row1">
  7.      <td>
  8.       index1
  9.      </td>
  10.      <td>first </td> 
  11.      <td>
  12.        row</td> 
  13.      <td>
  14.        here</td>
  15.      <td>
  16.        <input type="button" value=" UP " >
  17.        <input type="button" value="DOWN">
  18.      </td>
  19.    </tr>
  20.  
  21.    <tr name="row2">
  22.      <td>
  23.       index2
  24.      </td>
  25.      <td>
  26.        second </td> 
  27.      <td>
  28.        row </td> 
  29.      <td>
  30.        here</td>
  31.      <td>
  32.        <input type="button" value=" UP " >
  33.        <input type="button" value="DOWN" >
  34.      </td>
  35.    </tr>
  36.  
  37.    <tr>
  38.      <td>
  39.        index3     </td>
  40.      <td>
  41.        third  </td>
  42.      <td>
  43.        row </td>
  44.      <td>
  45.        here</td>
  46.      <td>
  47.        <input type="button" value=" UP " >
  48.        <input type="button" value="DOWN">
  49.      </td>
  50.    </tr>
  51.  
  52.    <tr>
  53.      <td>
  54.      index4     </td>
  55.      <td>
  56.        fourth </td>
  57.      <td>
  58.        row</td>
  59.      <td>
  60.        here</td>
  61.      <td>
  62.        <input type="button" value=" UP ">
  63.        <input type="button" value="DOWN">
  64.      </td>
  65.    </tr>
  66.  
  67.    <tr>
  68.      <td>
  69.       index5     </td>
  70.      <td>
  71.        fifth</td>
  72.      <td>
  73.        row </td>
  74.      <td>
  75.        here</td>
  76.      <td>
  77.        <input type="button" value=" UP " >
  78.        <input type="button" value="DOWN" >
  79.      </td>
  80.    </tr>
  81.  
  82.  </table>
  83.  
  84.   <br>
  85. </form>
Jan 2 '08 #12

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

Similar topics

4
by: SAN CAZIANO | last post by:
how can i swap column in a html table ???
1
by: Timmy | last post by:
Hi guy, consider the following table: <table id="t" border="0" width="200"> <tr> <td>1</td> </tr>
3
by: Dooza | last post by:
Hi there, I was wondering if anyone had come across some javascript that would allow me to have a chart of say 20 music tracks, and be able to move each track up and down the chart using up/down...
3
by: Kevin Bartz | last post by:
I'm de-duping a 45-million-row table (about 4 gigs) by creating a new table with the unique rows of the first table (should be about 3 gigs). I'm on a 64-bit SuSE Linux with 2 gigs of memory and...
0
by: Kevin Bartz | last post by:
-----Original Message----- From: Kevin Bartz Sent: Monday, August 09, 2004 10:37 AM To: 'mike@thegodshalls.com' Subject: RE: Out of swap space & memory Thanks for your reply, Mike!...
18
by: jpolaski | last post by:
I'd like to change the color of text in a table data field based on the content... For example, I'd like all <td>pos</td> to show the "pos" in red. All <td>pending</td> should show as the normal...
1
by: Phil | last post by:
Is it possible to swap rows and columns in select query output so that each record's data is displayed in a column? I want to collect data each day and display it in a query with each day's date...
11
by: inpuarg | last post by:
I have 2 datatables. They are identical. I want to compare them by cell's content. They are all same. But dt1 == dt2 or dt1.GetHashCode() == dt2.GetHashCode() doesn 't work. There are big...
0
by: Romulo NF | last post by:
Greetings again everyone Recently i´ve been asked to develop a script to allow filtering in the content of the table, with dinamic options based on the own content. Example: a table with the name of...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.