1

我需要使用 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

（我不想重复标题）。

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

4

3 回答 3

1

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

jQuery 可能看起来像::

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

和 css .popTable{overflow:auto;}

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

于 2013-09-23T00:07:05.097 回答
1

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

注意： th 必须出现在源表中

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));
}
于 2013-09-23T05:16:53.253 回答
1

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

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++;
        }
于 2013-09-23T11:14:08.377 回答