Dynamic table HTML Javascript

Question

I need to read an existing table with Javascript and then copy and paste it in a popup. After that I've done that, I need to dynamically change the table. The copied table in the popup must have the same rows, but it must have also a fixed height. The table to copy does not a have a fixed amount of rows. The popup content must be printed on paper, so I cannot apply a simple overflow to the table. I don't want to reduce the font size to insert everything in the fixed space, but I would like to dynamically extend the table width if the readed content is to long. For example, here is my starting table (6 rows):

H1   H2   H3
TD1  TD1 TD1 
TD2  TD2 TD2 
TD3  TD2 TD3 
TD4  TD4 TD4 
TD5  TD5 TD5 
TD6  TD6 TD6 

The copied table should be something like:

H1   H2   H3 H1   H2  H3
TD1  TD1 TD1 TD4  TD4 TD4 
TD2  TD2 TD2 TD5  TD5 TD5 
TD3  TD2 TD3 TD6  TD6 TD6 

Or

H1   H2   H3 
TD1  TD1 TD1 TD4  TD4 TD4 
TD2  TD2 TD2 TD5  TD5 TD5 
TD3  TD2 TD3 TD6  TD6 TD6 

(I do not care to repeat the headers).

What's the fastest/smartest way to do that?

Answer 1

I've resolved the problem by writing this function

var nuova_tabella = popupWin.document.createElement("table");
        nuova_tabella.className = "table table-bordered table-condensed"
        var thead = popupWin.document.createElement("thead");
        nuova_tabella.appendChild(thead);
        var head1 = popupWin.document.createElement("th");
        head1.innerHTML = "Abilita";
        var head2 = popupWin.document.createElement("th");
        head2.innerHTML = "Costo";
        thead.appendChild(head1);
        thead.appendChild(head2);
        var tbody = popupWin.document.createElement("tbody");
        nuova_tabella.appendChild(tbody);
        div_destro.appendChild(nuova_tabella);
        for (var i = 1; i < numero_abilita; i++) {
            if (count >= 10) {
                count = 0;
                var nuova_tabella = popupWin.document.createElement("table");
                nuova_tabella.className = "table table-bordered table-condensed";
                var thead = popupWin.document.createElement("thead");
                nuova_tabella.appendChild(thead);
                var head1 = popupWin.document.createElement("th");
                head1.innerHTML = "Abilita";
                var head2 = popupWin.document.createElement("th");
                head2.innerHTML = "Costo";
                thead.appendChild(head1);
                thead.appendChild(head2);
                tbody = popupWin.document.createElement("tbody");
                nuova_tabella.appendChild(tbody);
                div_destro.appendChild(nuova_tabella);
            }
            tbody.appendChild(abilita.rows[i].cloneNode(true));
            count++;
        }

Answer 2

Try this http://jsfiddle.net/w2n7B/5/

sample usage:

var table  = document.getElementById('table');
var tbl    = new jTable(2);
var rTable = tbl.transformTable(table));
document.getElementById('popup').appendChild(rTable);

NOTE: th must present in source table

HTML

<table id="tbl">
    <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
    </tr>
    <tr>
        <td>1 - 1</td>
        <td>1 - 2</td>
        <td>1 - 3</td>
    </tr>
    <tr>
        <td>2 - 1</td>
        <td>2 - 2</td>
        <td>2 - 3</td>
    </tr>
    <tr>
        <td>3 - 1</td>
        <td>3 - 2</td>
        <td>3 - 3</td>
    </tr>
    <tr>
        <td>4 - 1</td>
        <td>4 - 2</td>
        <td>4 - 3</td>
    </tr>
    <tr>
        <td>5 - 1</td>
        <td>5 - 2</td>
        <td>5 - 3</td>
    </tr>
</table>

<div id="copy"></div>

Javascript

function jTable(maxRows, withHeaders){
    var _maxRows     = 0;
    var _withHeaders = false;

    //maxRows - max rows
    //withHeaders - with header on each column
    var construct = function(maxRows, withHeaders){
        _maxRows     = maxRows;
        _withHeaders = typeof(withHeaders) == 'undefined' ? false : withHeaders;
    }

    //sourceTable - table with data to be converted into limited number of rows table
    this.transformTable = function(sourceTable){
        //create limited rows table(rTable)
        var copyTable = document.createElement('table');
        //store source table headers
        var headers   = sourceTable.rows[0].cells;

        for(var r = 0; r < sourceTable.rows.length - 1; r++){
            //defined index of rTable row
            var index = r - Math.floor(r / _maxRows) * _maxRows;
            var row   = copyTable.rows[index] || copyTable.insertRow(index);

            //copy cells
            for(var c = 0; c < headers.length; c++){
                var cell = row.insertCell(row.cells.length);
                cell.innerText = sourceTable.rows[r + 1].cells[c].innerText;                
            }
        }

        addHeaders(copyTable, sourceTable.rows[0].cells);
        return copyTable;
    }

    //add headers to rTable
    var addHeaders = function(table, headers){
        var headerRow   = table.insertRow(0);
        var headerCount = _withHeaders ? table.rows[1].cells.length : headers.length;

        for(var h = 0; h < headerCount; h++){
            var th        = document.createElement('th');
            //index of source table header
            var textIndex = h - Math.floor(h / headers.length) * headers.length;

            th.innerText = headers[textIndex].innerText;
            headerRow.appendChild(th);
        }
    }

    construct.call(this, maxRows, withHeaders)
}

window.onload = function(){
    var sourceTable = document.getElementById('tbl');
    var tTable = new jTable(2, false);
    document.getElementById('copy').appendChild(tTable.transformTable(sourceTable));
}

Answer 3

I think the fastest way to do this would be to grab the markup for the table, and insert it into the pop-up, and apply a class or id to restyle it. Perhaps using scroll for the overflow instead of trying to reorder the cells. Or perhaps a different layout that has the headings run down the first column.

jQuery for this might look like::

$('#popup').append($('table').html().addClass('popTable'));

and the css .popTable{overflow:auto;}

With regard to the easiest way to rearrange your table with javascript, what have you tried so far?