www.webdeveloper.com
Results 1 to 2 of 2

Thread: repositioning table rows and everything inside it

  1. #1
    Join Date
    Feb 2009
    Posts
    1

    repositioning table rows and everything inside it

    is their a way to reposition <tr> inside a table dynamically?

    <table>
    <tr class="someClass">
    <td>...some input box 1-a...</td>
    <td>...some input box 1-b...</td>
    </tr>
    <tr class="someClass">
    <td>...some input box 2-a...</td>
    <td>...some input box 2-b...</td>
    </tr>
    </table>

    with javascript, is it possible to replace the contents of the 1st tr to the contents of 2nd tr and vice versa?

    Thanks in advance

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <script>
    function swapRows(r1, r2) {
    	var rowArr = document.getElementsByTagName("tr");
    	var tdArr1 = rowArr[r1].getElementsByTagName("td");
    	var tdArr2 = rowArr[r2].getElementsByTagName("td");
    	for (i=0;i<tdArr1.length;i++) {
    		tempHold=tdArr1[i].innerHTML;
    		tdArr1[i].innerHTML=tdArr2[i].innerHTML;
    		tdArr2[i].innerHTML=tempHold;
    	}
    }
    
    </script> 
    </head>
    
    <body>
    <table>
    <tr class="someClass">
    <td>...some input box 1-a...</td>
    <td>...some input box 1-b...</td>
    </tr>
    <tr class="someClass">
    <td>...some input box 2-a...</td>
    <td>...some input box 2-b...</td>
    </tr>
    <tr class="someClass">
    <td>...some input box 3-a...</td>
    <td>...some input box 3-b...</td>
    </tr>
    </table>
               <button onclick="swapRows(0, 2)">Swap Rows</button>                                
    </body>
    </html>
    54 68 65 42 65 61 72 4D 61 79

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles