SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tipping a table on its side using jquery

    I have a table with a header row, and the left column that are both labels (tabular data), I'd like to turn it on it's side so that the left column becomes the header, and the header becomes the left column. I'm hoping there's a jquery plugin that can already do this. I'd rather not reinvent the wheel. Anyone know of anything?
    Bring out our hope and reason, before we pine away.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I ran this up using normal javascript, which works fine with a test table.

    Code Javascript:
    function flipTable(id) {
      var table = document.getElementById(id);
      var rows = table.getElementsByTagName('tr');
      var newTable = table.cloneNode(false);
      var newRow;
      var cell;
      // work across
      for (var i=0; i < rows[0].childNodes.length; i++) {
    	if (isTableCell(rows[0].childNodes[i])) {
    	  // then work down
      	  newRow = document.createElement('tr');
          for (var j=0; j < rows.length; j++) {
    	    if (isTableCell(rows[j].childNodes[i])) {
    	      cell = rows[j].childNodes[i];
    		  newRow.appendChild(cell.cloneNode(true));
    		}
    	  newTable.appendChild(newRow);
    	  }
    	}
      }
      table.parentNode.replaceChild(newTable, table);
    }
    function isTableCell(el) {
      return (el.nodeName == 'TH' || el.nodeName == 'TD');
    }

    Code HTML4Strict:
    <table id="myTable">
    	<tr>
    		<th>Table</th><th>Col1</th><th>Col2</th><th>Col3</th>	
    	</tr>
    	<tr>
    	    <th>Row1</th><td>1</td><td>2</td><td>3</td>
        </tr>
    	<tr>
    	    <th>Row2</th><td>4</td><td>5</td><td>6</td>
        </tr>
    	<tr>
    	    <th>Row3</th><td>7</td><td>8</td><td>9</td>
        </tr>
    </table>
    <input type="button" value="Flip Table" onclick="flipTable('myTable')" />
    Last edited by paul_wilkins; Dec 12, 2007 at 18:10.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot man, I'll port this over and it should work fine. Nice work.
    Bring out our hope and reason, before we pine away.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    In the weekend I'll come up with a jquery version of it.

  5. #5
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well darn. I was humming along using the code, when I decided to check IE& to make sure everything was kosher. In IE7, after running this code, the table fully disappears. I used a dev tool to find that the code actually still works in IE, and the table is still part of the DOM as expected, but for some reason it yanks out of the rendering queue entirely.

    Any ideas?
    Bring out our hope and reason, before we pine away.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'm very sorry but I'm at a loss as to why this occurs in IE7.

    Can anyone else help here?

  7. #7
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm tearing my hair out here, this is just silly. I've come up with a minimal test case but gotten no useful information from it.
    Bring out our hope and reason, before we pine away.

  8. #8
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out!

    Your code created a table with rows and cells, just like one might expect. IE7, however, requires that you have a tbody tag to contain the rows/cells. The trick is this:

    IE7 team knew that most tables weren't written with the tbody tfoot thead thing in mind, so they figured they inject the appropriate tags at PARSE time... that's why your table works when you load up the file without a tbody -- if you actually examine the dom, the tbody tag is there anyway.

    However, when the DOM is manipulated after the document has been parsed, no such checks take place, and the renderer assumes there is a tbody there. If there isn't, the table is invisible.

    I love IE. It makes my life easier and happier, and brings me joy.
    Bring out our hope and reason, before we pine away.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Thanks for clarifying that.

    So the final code becomes

    Code JavaScript:
    function flipTable(id) {
      var table = document.getElementById(id);
      var rows = table.getElementsByTagName('tr');
      var newTable = table.cloneNode(false);
      var newTbody = document.createElement('tbody');
      var newRow;
      var cell;
      // work across
      for (var i=0; i < rows[0].childNodes.length; i++) {
        if (isTableCell(rows[0].childNodes[i])) {
          // then work down
          newRow = document.createElement('tr');
          for (var j=0; j < rows.length; j++) {
            if (isTableCell(rows[j].childNodes[i])) {
              cell = rows[j].childNodes[i];
              newRow.appendChild(cell.cloneNode(true));
            }
          newTbody.appendChild(newRow);
          }
        }
      }
      newTable.appendChild(newTbody);
      table.parentNode.replaceChild(newTable, table);
    }
    function isTableCell(el) {
      return (el.nodeName == 'TH' || el.nodeName == 'TD');
    }

  10. #10
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was my solution as well 8)
    Bring out our hope and reason, before we pine away.


Bookmarks

Posting Permissions

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