Dynamic table HTML Javascript

我认为最快的方法是获取表格的标记，并将其插入弹出窗口，然后应用类或 id 来重新设置它。也许使用滚动进行溢出，而不是尝试对单元格重新排序。或者，也许是标题沿着第一列向下延伸的不同布局。

对此的 jQuery 可能如下所示：

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

和 CSS .popTable{overflow：auto;}

关于用javascript重新排列表格的最简单方法，到目前为止你尝试了什么？

试试这个 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>

爪哇语

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

我已经通过编写这个函数解决了这个问题

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