[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Changing orientation of a table

Posted on 2006-11-30
8
Medium Priority
?
527 Views
Last Modified: 2012-08-13
Hello Experts:

I have a table like this:

-------------------------
<table id="col_head">
   <caption> This is a table oriented one way</caption>
   <tr>
          <td>Empty cell</td>
          <th>Column Header 1</th>
          <th>Column Header 2</th>
          <th>Column Header 3</th>
   </tr>
   <tr>
          <th>Row Header 1</th>
          <td>Value 1</td>
          <td>Value 2</td>
          <td>Value 3</td>
   </tr>
</table>
<button name="submit" value="change table view" onsubmit="">

--------------------

Now, after the button is clicked, I want the resultant html to be:

--------------------
<table id="row_head">
    <tr>
          <td>Empty Cell</td>
          <th>Row Header 1</th>
    </tr>
    <tr>
          <th>Column Header 1</th>
          <td>Value 1</td>
    </tr>
    <tr>
           <th>Column Header 2</th>
           <td>Value 2</td>
    </tr>
    <tr>
            <th>Column Header 3</th>
            <td>Value 3</td>
    </tr>
</table>
----------------------
0
Comment
Question by:freezegravity
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 

Author Comment

by:freezegravity
ID: 18051489
Oh and for id="row_head", the caption should say <caption>This is a table oriented another way</caption>

Also, the ideal solution would not be concerned with the amount of "column headers" and "row headers."

And another thing, it might be easier to put a border="1" on the table definition just so you can better determine what I am trying to do.

Thanks again.

FG!

0
 
LVL 12

Assisted Solution

by:enachemc
enachemc earned 700 total points
ID: 18052124
<script language=javascript>
      function chTable(){
            var t1 = document.getElementById('col_head');
            var t2 = document.createElement('table');
            t2.border = 1;
            for(i = 0; i < t1.rows[0].cells.length; i++){
                  var row = t2.insertRow();
                  var td1 = row.insertCell();
                  var td2 = row.insertCell();
                  td1.innerHTML = t1.rows[0].cells[i].innerHTML;
                  td2.innerHTML = t1.rows[1].cells[i].innerHTML;
            }
            document.getElementById('table_here').insertBefore(t2);
            
      }
</script>

<table id="col_head">
   <caption> This is a table oriented one way</caption>
   <tr>
          <td>Empty cell</td>
          <th>Column Header 1</th>
          <th>Column Header 2</th>
          <th>Column Header 3</th>
   </tr>
   <tr>
          <th>Row Header 1</th>
          <td>Value 1</td>
          <td>Value 2</td>
          <td>Value 3</td>
   </tr>
</table>
<input type="button" value="change" value="change table view" onClick="chTable()">
<div id="table_here" />
0
 
LVL 12

Assisted Solution

by:enachemc
enachemc earned 700 total points
ID: 18052148
with caption:



<script language=javascript>
      function chTable(){
            var t1 = document.getElementById('col_head');
            var t2 = document.createElement('table');
            var caption = document.createElement('caption');
            caption.innerHTML = 'This is a table oriented another way';
            t2.appendChild(caption);
            t2.border = 1;
            for(i = 0; i < t1.rows[0].cells.length; i++){
                  var row = t2.insertRow();
                  var td1 = row.insertCell();
                  var td2 = row.insertCell();
                  td1.innerHTML = t1.rows[0].cells[i].innerHTML;
                  td2.innerHTML = t1.rows[1].cells[i].innerHTML;
            }
            document.getElementById('table_here').insertBefore(t2);
            
      }
</script>

<table id="col_head">
   <caption> This is a table oriented one way</caption>
   <tr>
          <td>Empty cell</td>
          <th>Column Header 1</th>
          <th>Column Header 2</th>
          <th>Column Header 3</th>
   </tr>
   <tr>
          <th>Row Header 1</th>
          <td>Value 1</td>
          <td>Value 2</td>
          <td>Value 3</td>
   </tr>
</table>
<input type="button" value="change" value="change table view" onClick="chTable()">
<div id="table_here" />
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 12

Accepted Solution

by:
AmigoJack earned 1300 total points
ID: 18052442
oh yes, innerHTML :-) the one that only works in MSIE.
well, it was a challenging task, but ive rendered a way to transform a table which works for all major browsers (MSIE, FIRE, OPER). due to the DOM complexity my script has some requirements so that it will work on every table:

1.) the table must have the same amount of columns per row. this excludes spanning columns and/or rows.
2.) the cells itself must not include any other element (like <b> for example), only text is allowed.
3.) the transformation does not expect explicit styles or attributes for all tags within a table.

said this, try the code below with all three browsers :) the code is a bit messy, if you have questions, feel free to ask them. i wont comment code if its not really needed

<html><head>
  <style type="text/css">
    td { border: 1px solid; }
  </style>
  <script type="text/javascript">
    function swapTable(e) {
      var tb= e.firstChild.nodeName== 'TBODY';
      if (tb) e= e.firstChild;

      var a= new Array();
      var cR= 0, cD= 0;

      var en= e.firstChild;
      do {
        cR++;
        en= en.nextSibling;
      } while (en!= null);

      en= e.firstChild.firstChild;
      do {
        /*if (en.nodeName== 'TD')*/ cD++;
        en= en.nextSibling;
      } while (en!= null);

      var i1, i2, i3, i4, i5= -1;
      for (i1= 0; i1< cD; i1++) {
        i4= 0;
        for (i2= 0; i2< cR; i2++) {
          en= e.firstChild;
          for (i3= 0; i3< i2; i3++) en= en.nextSibling;
          en= en.firstChild;
          for (i3= 0; i3< i1; i3++) en= en.nextSibling;
          if (en.nodeName== 'TD') {
            if (i4== 0) {
              i5++;
              a[i5]= new Array();
            }
            a[i5][i4]= en.firstChild.nodeValue;
            i4++;
          }
        }
      }

      for (i2= 0; i2< a[0].length; i2++) e.removeChild(e.firstChild);

      for (i1= 0; i1< a.length; i1++) {
        e.appendChild(document.createElement('TR'));
        for (i2= 0; i2< a[i1].length; i2++) {
          en= document.createElement('TD');
          e.lastChild.appendChild(en);
          en= document.createTextNode(a[i1][i2]);
          e.lastChild.lastChild.appendChild(en);
        }
      }
    }
  </script>
</head><body>
  <a href="javascript:swapTable(document.getElementById('opfer'));">swap</a>

  <table id="opfer"><tr>
    <td>Empty cell</td>
    <td>Column Header 1</td>
    <td>Column Header 2</td>
    <td>Column Header 3</td>
  </tr><tr>
    <td>Row Header 1</td>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
  </tr></table>
  <span><b>test</b></span>
</body></html>
0
 
LVL 12

Expert Comment

by:AmigoJack
ID: 18052997
oh well, i forgot:

4.) it *only* works with TDs. THs or TFs are not recognized. this would intensify the code significantly, while not using header or footer cells wouldnt really impact i think.

but it really works for *any* table structure. try it with 20 rows and 5 columns orso...
0
 

Author Comment

by:freezegravity
ID: 18053877
AmigoJack and enachemc:

WOW!!!!

I didn't think I would receive code/solution that is this efficient and effective.

If ever I've seen a split points questions, it is this. I wanted to point out the differences between the code for future readers who will no doubt benefit if they find this question:

AmigoJack's code:

1. Really works for tables with any amount of row's/column's.
2. Doesn't take into account th's and other tags.
3. Works with all browsers.

enachemc's code:

1. Takes into account th's and other tags
2. Does NOT in and of itself figure out how many columns/rows there are. It is easily configurable for any amount though, but for every extra row, one must code one more line.

Both have their advantages and disadvantages.  Both shall be tremendously helpful!

Thanks a bunch you two!

FG!
0
 

Author Comment

by:freezegravity
ID: 18054010
Correction:

enachemc's code turns th's to td's.

AmigoJack's code doesn't have th's to start with.

I hope that I will get a chance to modify your codes so that th's are accounted for. I shall try and post here when done and tested.

Thanks again.

FG!
0
 
LVL 12

Expert Comment

by:AmigoJack
ID: 18055250
good luck :)
0

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question