有沒有辦法將表頭文本附加爲每個td的屬性？

我最近在下面的例子中看到了一個JS生成的「Handsontable」表。有沒有辦法將表頭文本附加爲每個td的屬性？

http://jsfiddle.net/handsoncode/b2g2h7oh/

生成的表中的JS代碼如下所示：

var financeData = [ 
["239.65","24/02/2015","0.000128","-0.2379","47.044"], 
["238.99","24/02/2015","0.0106","-0.2435","5.11"], 
["231.26","24/02/2015","0.0066","-0.2521","7.571"], 
["239.12","24/02/2015","0.0082","-0.2454","16.429"], 
["255.07","24/02/2015","0.0091","-0.2017","252"], 
["238.91","24/02/2015","0.0077","-0.2437","995"], 
["211.51","24/02/2015","0.0089","-0.1880","4.28"], 
["210.65","24/02/2015","0.0078","-0.1930","2.521"], 
["205.06","24/02/2015","0.0107","-0.2251","96"], 
["212.41","24/02/2015","0.0085","-0.1949","456"], 
["227.94","24/02/2015","0.0158","-0.1363","49"], 
["211.28","24/02/2015","0.0078","-0.1765","19"], 
["1486.97","24/02/2015","0.0112","-0.2310","168"], 
["1310.00","24/02/2015","-0.01812","-0.3310","0"], 
["1497.50","24/02/2015","0.0051","-0.2309","160"] 
]; 

var container = document.getElementById('example'); 

var hot = new Handsontable(container, { 
data: financeData, 
colHeaders: ["Price", "Date", "1D Chg", "YTD Chg", "Vol BTC"], 
rowHeaders: true, 
stretchH: 'all', 
sortIndicator: true, 
columnSorting: true, 
contextMenu: true, 
columns: [ 
    {type: 'numeric', format: '$0,0.00'}, 
    {type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true}, 
    {type: 'numeric', format: '0.00%'}, 
    {type: 'numeric', format: '0.00%'}, 
    {type: 'numeric', format: '0.00'} 
] 
});

由於是通過JS生成的HTML，我不能一個HTML屬性添加到每個TD的的。

我想實現的目標：我想實現的是在表格中爲每個TD添加一個「data-th」屬性。但是，每個「data-th」值都將與其所在列的標題名稱相匹配。例如：

第一列 - 第1行到第15行將與data-th =「price」關聯他們的TD。

第二行 - 第一行到第十五行將有一個與其TD相關的data-th =「date」。

有沒有辦法做到這一點？

任何援助在這裏將不勝感激。

來源

2016-10-10 MegaTron

的[在其網站上「頭」示例]（https://handsontable.com/examples.html?headers）似乎表明如何創建一個單元格的渲染器，你應該可以改變它來添加一個屬性... –

試試這個。（這需要jQuery的，還是也可以不用做。）

http://jsfiddle.net/b2g2h7oh/243/

的想法是用afterRender()（see the manual）和Handsontable加載後操作DOM。在<tr>行

afterRender: function(isForced) { 
    if (!isForced) { 
     return false; 
    } 
    var colNr = this.countCols(), 
     rowNr = this.countRows(), 
     colHeaders = this.getColHeader(), 
     $els = $(container).find("table.htCore tbody tr td"); 
    for (var y = 0; y < rowNr; y++) { 
     for (var i = 0; i < colNr; i++) { 
     $($els[ y*colNr+i ]).attr("data-th", colHeaders[i]).data("th", colHeaders[i]); 
     } 
    } 
    }

DOM標記：

<tr> 
    <th class=""><div class="relative"><span class="rowHeader">1</span></div></th><td class="htRight htNumeric" data-th="Price">$239.65</td> 
    <td class="htAutocomplete" data-th="Date">24/02/2015<div class="htAutocompleteArrow">▼</div></td> 
    <td class="htRight htNumeric" data-th="1D Chg">0.01%</td> 
    <td class="htRight htNumeric" data-th="YTD Chg">-23.79%</td> 
    <td class="htRight htNumeric" data-th="Vol BTC">47.04</td> 
</tr>

來源

2016-10-10 15:02:55 nilsole

這是偉大的Nilsole！感謝您花時間和精力寫出來。讚賞。 – MegaTron

有沒有辦法將表頭文本附加爲每個td的屬性？

回答

相關問題