我需要用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
(我不在乎重复标题)。
最快/最聪明的方法是什么?
我认为最快的方法是获取表格的标记,并将其插入弹出窗口,然后应用类或 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++;
}