DOM: How to convert a table into a table with a 2-column table per row?

Question

How can a HTML table with horizontal headers be converted into a table where each row contains a table with two columns?

The column on the left would contain the vertical headers, while the one on the right side would contain the relevant values.

This fiddle shows an example of the original table and the table that would be shown instead.

Having a look at this couple of tables, the intended behaviour would consist of turning the table with horizontal headers into one with vertical headers, but minding the fact that, if the first table had more than one row, the second table should also contain the same number of rows, but formed by tables with vertical headers in the first column, and the correspondent values in the second column.

Original table:

<table id="tableid">
<thead>
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>Smith</td>
        <td>47</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>Jones</td>
        <td>38</td>
    </tr>
</tbody>

Targeted table:

<table id="tableid">
    <tr>
        <table>
            <tr>
                <th>Name</th>
                <td>John</td>
            </tr>
            <tr>
                <th>Surname</th>
                <td>Smith</td></tr>
            <tr>
                <th>Age</th>
                <td>47</td>
            </tr>
        </table>
    </tr>
    <tr>
        <table>
            <tr>
                <th>Name</th>
                <td>Bob</td>
            </tr>
            <tr>
                <th>Surname</th>
                <td>Jones</td></tr>
            <tr>
                <th>Age</th>
                <td>38</td>
            </tr>
        </table>
    </tr>
</table>

is intended to be converted manually or programatically with javascript? — Mehdi Ben Hamida, Mar 27 '18 at 14:24
I'm trying to modify a web page, on page load, by overriding a bit of js/css in Chrome, with the help of the extension User Javascript and CSS: https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld . So I think the input for javascript would be the Document Object Model on page load. — Kr0m, Mar 27 '18 at 14:34
I've tried overriding a bit of CSS with: tr { display: block; float: left; } th, td { display: block; } But that's simply not good enough even as a rough workaround...Any ideas? — Kr0m, Mar 27 '18 at 14:40

score 0 · Answer 1 · answered Mar 27 '18 at 14:43

0

I hope that this might help you, this actually inverse a vertical table to an horizontal one.

function inverse(){
  var t= document.getElementsByTagName('tbody')[0];
  r= t.getElementsByTagName('tr');
  cols= r.length; 
  rows= r[0].getElementsByTagName('td').length;
  let cell;
  let next;
  let tem;
  i= 0;
  tbod= document.createElement('tbody');

  while(i<rows){
    cell= 0;
    tem= document.createElement('tr');
    while(cell<cols){
        next= r[cell++].getElementsByTagName('td')[0];
        tem.appendChild(next);
    }
    tbod.appendChild(tem);
    ++i;
  }
  t.parentNode.replaceChild(tbod, t);
}

answered Mar 27 '18 at 14:43

Mehdi Ben Hamida

893
4
16
38

Thanks Mèhdi. I already tried a similar function, but it doesn't really solve the problem. The function I used was in this question: https://stackoverflow.com/questions/2730699/convert-td-columns-into-tr-rows – Kr0m Mar 27 '18 at 14:49
it almost do the same, still cannot understand what do want exactly? – Mehdi Ben Hamida Mar 27 '18 at 15:28
Imagine a table of 100 columns*1000 rows. Swapping columns and rows would result in a 1000*100 table, which doesn't remove the need for scrolling horizontally. For each row in the original table we can create a table with 2 columns: the one on the left would always contain the column headers of the original table, but one in a row; while the column on the right would contain the appropriate values. Please, run the second table's snippet, and imagine many more person attributes and people, and note that it would only increase the vertical scroll/height, with no need for scrolling horizontally. – Kr0m Mar 28 '18 at 07:28

DOM: How to convert a table into a table with a 2-column table per row?

1 Answers1