動態表格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

我寫此功能

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

Answer 2

我認爲最快的方法是獲取表格的標記，並將其插入到彈出窗口中，然後應用類或標識對其進行重新設置。也許使用滾動的溢出，而不是嘗試重新排列單元格。或者也許是一個不同的佈局，其標題沿着第一列排列。

的jQuery這個看起來像::

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

和CSS .popTable {溢出：汽車;}

對於最簡單的方法來重新安排使用JavaScript你的表，你有什麼你到目前爲止嘗試過？

Answer 3

試試這個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)); 
}