테이블 머리글 텍스트를 각 td의 특성으로 추가하는 방법이 있습니까?

Question

최근에 "Handsontable"의 JS 생성 테이블을 아래 예제에서 살펴 보았습니다.

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

테이블을 생성하는 JS 코드는 다음과 같습니다 다음 HTML은 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'} 
] 
}); 

, 나는이 TD의 각각에 HTML 속성을 추가 할 수 없습니다.

달성하고자하는 목표 : 내가 달성하고 싶은 것은 테이블 내의 각 TD에 "데이터"속성을 추가하는 것입니다. 그러나 각 "데이터 - th"값은 해당 열의 머리글 이름과 일치합니다. 예 :

열 1 - 행 1에서 15까지는 데이터 th = "가격"과 연관됩니다. 그들의 TD.

열 2 - 행 1에서 열 15까지는 해당 TD와 관련된 데이터 th = "날짜"를 갖습니다.

이 방법이 있습니까?

여기에 도움을 주시면 매우 감사하겠습니다.

Answer 1

시도해보십시오. (이것은 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>