Question

我最近在“Handsontable”上看了一个JS生成的表，下面是一个例子。

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

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

我想要实现的目标：我想要实现的是为表中的每个TD添加“数据”属性。但是，每个“数据”值都将匹配它所在列的标题名称。例如：

第一列 - 第1行至第15行将具有与其TD相关联的数据-th =“price”。

第二列 - 第1行至第15行将具有与其TD相关联的数据th =“日期”。

有没有办法实现这个目标？

非常感谢这里的任何帮助。

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

<tr>行的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>

有没有办法将表头文本作为每个td的属性附加？

1 个答案: