2013-06-19 37 views
0

我已經得到了一些數據,如下面生成表從數組數據

var data = [ [21, [1,2] ], [22, [1,2] ] ]; 
var const = [-1 , 0 , 1]; 

我的要求是與下面結構

21, 22 are main column headers 
1, 2 are nested columns under 21, 22 

,以產生一個表21中的每個1,2,22我需要添加const值作爲嵌套列標題 所以在上述情況下
21,22是主列標題, 1,2將在每個21,22下嵌套列const value -1,0,1將被嵌套列標題下每個1,2的21,22 我寫了下面的代碼。但是,這是行不通的

function simplifyCols(obj) { 
    var reform = { 
     table : {} 
    }; 
    for (var x = 0; x < obj.length; x++) { 
     obj[x].push(const); 
    } 
    for(var i = 0, l = obj.length; i < l; i++){ 
     var key = obj[i]; 
     for (var j = 0, m = key.length; j < m; j++) { 
      var colspan = 1; 
      for (var k = j + 1; k < m; k++) { 
       colspan *= key[k].length; 
      } 
      reform.table[j] = reform.table[j] || []; 
      reform.table[j].push({ 
       span : colspan, 
       data : key[j] 
      }); 
     } 
    } 
    return reform; 
} 
var cols = simplifyCols(data).table; 
var keys = Object.keys(cols).sort(function(a, b){ 
    return a - b; 
}); 
var table = document.createElement('table'); 
document.body.appendChild(table); 
for (var i = 0, l = keys.length; i < l; i++) { 
    var keyData = cols[keys[i]], tr = document.createElement('tr'); 
    table.appendChild(tr); 
    for (var j = 0, m = keyData.length; j < m; j++) { 
     var eleData = keyData[j].data; 
     if(eleData instanceof Array){ 
      for (var k = 0, n = eleData.length; k < n; k++) { 
       var td = document.createElement('td'); 
       td.innerHTML = eleData[k]; 
       td.colSpan = keyData[j].span; 
       tr.appendChild(td); 
      } 
     }else{ 
      var td = document.createElement('td'); 
      td.innerHTML = keyData[j].data; 
      td.colSpan = keyData[j].span; 
      tr.appendChild(td); 
     } 
    } 
    table.appendChild(tr); 
} 
document.body.appendChild(table); 

請幫助改善邏輯,並使其工作。我敲在中間,無法進行進一步

這裏是我從上面

小提琴期待在這裏http://jsfiddle.net/4NS8d/

<table> 
    <tr> <td colspan="6">21</td> <td colspan="6">21</td> </tr> 
    <tr> <td colspan="3">1</td> <td colspan="3">2</td> <td colspan="3">1</td> <td colspan="3">2</td> </tr> 
    <tr> <td>-1</td> <td>0</td> <td>1</td><td>-1</td> <td>0</td> <td>1</td><td>-1</td> <td>0</td> <td>1</td><td>-1</td> <td>0</td> <td>1</td></tr> 
</table> 
+3

我在下面你的解釋有些麻煩。您介意發佈您希望腳本根據該輸入生成的HTML嗎? –

+0

@DavidHedlund我已經更新了這個問題。請考慮一下。 – Exception

回答

0

所有你能不能命名VAR常量第一的HTML。

試試這個:

var const2 = [-1 , 0 , 1]; 
function simplifyCols(obj) { 
    var reform = { 
     table : {} 
    }; 
    for (var x = 0; x < obj.length; x++) { 
     obj[x].push(const2); 
    } 
    for(var i = 0, l = obj.length; i < l; i++){ 
     var key = obj[i]; 
     for (var j = 0, m = key.length; j < m; j++) { 
      var colspan = 1; 
      for (var k = j + 1; k < m; k++) { 
       colspan *= key[k].length; 
      } 
      reform.table[j] = reform.table[j] || []; 
      reform.table[j].push({ 
       span : colspan, 
       data : key[j] 
      }); 
     } 
    } 
    return reform; 
} 
var data = [ [21, [1,2] ], [22, [1,2] ] ]; 
var cols = simplifyCols(data).table; 
var keys = Object.keys(cols).sort(function(a, b){ 
    return a - b; 
}); 
var table = document.createElement('table'); 
document.body.appendChild(table); 
for (var i = 0, l = keys.length; i < l; i++) { 
    var keyData = cols[keys[i]], tr = document.createElement('tr'); 
    table.appendChild(tr); 
    for (var j = 0, m = keyData.length; j < m; j++) { 
     var eleData = keyData[j].data; 
     if(eleData instanceof Array){ 
      for (var k = 0, n = eleData.length; k < n; k++) { 
       var td = document.createElement('td'); 
       td.innerHTML = eleData[k]; 
       td.colSpan = keyData[j].span; 
       tr.appendChild(td); 
      } 
     }else{ 
      var td = document.createElement('td'); 
      td.innerHTML = keyData[j].data; 
      td.colSpan = keyData[j].span; 
      tr.appendChild(td); 
     } 
    } 
    table.appendChild(tr); 
} 
document.body.appendChild(table); 

http://jsfiddle.net/zxvnp/

+0

在輸出中,最後的常量值只添加到底部的兩列。但他們必須爲每個最後的細胞。這就是我確切的問題 – Exception

+0

試試這個:http://jsfiddle.net/zxvnp/2/ –