Question

我需要使用Javascript读取现有表格，然后将其复制并粘贴到弹出窗口中。之后我就完成了，我需要动态更改表格。弹出窗口中复制的表必须具有相同的行，但它必须也具有固定的高度。要复制的表没有固定数量的行。弹出内容必须打印在纸上，所以我不能应用简单的溢出桌子。我不想减小字体大小以在固定空间中插入所有内容，但是如果readed内容很长，我想动态扩展表格宽度。例如，这是我的起始表（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 {溢出：汽车;}

关于使用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>

的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

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

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

动态表格HTML Javascript

3 个答案: