動態表格HTML Javascript

Question

我需要使用Javascript閱讀現有表格，然后將其復制並粘貼到彈出窗口中。 之后，我需要動態更改表。 彈出窗口中復制的表必須具有相同的行，但必須具有固定的高度。 要復制的表沒有固定的行數。 彈出內容必須打印在紙上，因此我無法對表應用簡單的溢出。 我不想減小字體大小以將所有內容插入固定的空間，但是如果讀取的內容太長，我想動態擴展表的寬度。 例如，這是我的起始表（6行）：

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

復制的表應類似於：

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

要么

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

（我不在乎重復標題）。

最快/最聰明的方法是什么？

Answer 1

我認為最快的方法是獲取表的標記，然后將其插入彈出窗口，然后應用類或id重新設置其樣式。 也許使用滾動來避免溢出，而不是嘗試對單元進行重新排序。 也許標題的標題在第一列的下方不同。

jQuery可能看起來像：

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

和CSS .popTable {overflow：auto;}

關於用javascript重新排列表格的最簡單方法，到目前為止，您嘗試了什么？

Answer 2

試試這個http://jsfiddle.net/w2n7B/5/

樣本用法：

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

注意：必須在源表中顯示

的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>

Java腳本

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

我已經通過編寫此函數解決了問題

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++;
        }