有没有办法将 table header 文本附加为每个 td 的属性？

Question

我最近查看了 "Handsontable" 上生成的 table JS，下面是一个示例。

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

生成 table 的 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: '[=12=],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'}
 ]
});

由于HTML是通过JS生成的，我无法为每个TD添加HTML属性。

我想要实现的目标：我想要实现的目标是为 table 中的每个 TD 添加一个 "data-th" 属性。但是，每个 "data-th" 值都将与其所在列的 header 的名称相匹配。例如：

第一列 - 第 1 至 15 行将 data-th="price" 与其 TD 相关联。

第二列 - 第 1 至 15 行将有一个 data-th="date" 与其 TD 相关联。

有办法实现吗？

如有任何帮助，我们将不胜感激。

Answer 1

试试这个。（这需要 jQuery，没有也可以完成。）

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

想法是使用 afterRender() (see the manual) 并在加载 Handsontable 后操作 DOM。

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> 行的标记：

<tr>
    <th class=""><div class="relative"><span class="rowHeader">1</span></div></th><td class="htRight htNumeric" data-th="Price">9.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>

有没有办法将 table header 文本附加为每个 td 的属性？

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

html

javascript

handsontable