Is there a way to append table header text as an attribute for each td?

Question

I recently took a look at a JS generated table at "Handsontable" with an example below.

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

The JS code that generates the table looks like this:

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

As the HTML is generated through the JS, I cannot add a HTML attribute to each of the TD's.

What I want to achieve: What I want to achieve is adding a "data-th" attribute to each of the TD's within the table. However, each of the "data-th" values will match the name of the header of the column it's situated in. For example:

Column One - Row 1 to 15 would have data-th="price" associated with their TD.

Column Two - Row 1 to 15 would have a data-th="date" associated with their TD.

Is there a way to achieve this?

Any assistance here would be extremely appreciated.

Answer 1

Try this. (This requires jQuery, still could also be done without.)

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

The idea is to use afterRender() (see the manual) and to manipulate the DOM after Handsontable has been loaded.

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 of the <tr> rows:

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