Gibt es eine Möglichkeit, Tabellenkopftext als Attribut für jeden td anzuhängen?

Question

Ich habe kürzlich eine JS-generierte Tabelle unter "Handsontable" mit einem Beispiel unten betrachtet.

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

Der JS-Code, der die Tabelle wie folgt aussieht erzeugt:

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'} 
] 
}); 

Da die HTML durch die JS erzeugt wird, ich ein HTML-Attribut zu jedem der TD nicht hinzufügen können.

Was ich erreichen möchte: Was ich erreichen möchte, ist das Hinzufügen eines "Data-th" -Attributs zu jedem der TD's innerhalb der Tabelle. Jeder der "dat-th" -Werte entspricht jedoch dem Namen der Kopfzeile der Spalte, in der er sich befindet. Beispiel:

Spalte Eins - Zeile 1 bis 15 wäre daten-th = "Preis" zugeordnet ihr TD.

Spalte Zwei - Zeile 1 bis 15 hätte ein Daten-th = "Datum" mit ihrem TD verbunden.

Gibt es einen Weg, dies zu erreichen?

Jede Hilfe hier wäre sehr geschätzt.

Answer 1

Versuchen Sie es. (Dies erfordert jQuery, könnte auch noch ohne erfolgen.)

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

Die Idee ist afterRender() (see the manual) zu verwenden und den DOM zu manipulieren nach Handsontable geladen wurde.

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-Markup der <tr> Reihen:

<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>