Question

我刚刚开始使用jsPDF AutoTable，我真的很喜欢插件，这适合我的项目。但是，我遇到了如何识别表行的类属性的问题。例如：

我有一个表，其中一些行有一个类=＆＃34;类别＆＃34;如下。

<table id="tblTest" style="width:100%">
  <tr>
    <th>ProductName</th>
    <th>Qty</th> 
    <th>Price</th>
  </tr>
  <tr>
    <td class="Category" colspan="2">Project on PC hardwares</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>Motherboard</td>
    <td>20</td> 
    <td>100</td>
  </tr>
  <tr>
    <td>Memory (RAM)</td>
    <td>20</td> 
    <td>200</td>
  </tr>
  <tr>
    <td class="Category" colspan="2">On-Site Services</td>
    <td>2000</td>
  </tr>
   <tr>
    <td>Installation</td>
    <td>1</td> 
    <td>300</td>
  </tr>
  .... more categories and rows ....
</table>

这是我的jsPDF Autotable代码：

var res = doc.autoTableHtmlToJson(document.getElementById("tblTest"));
    doc.autoTable(res.columns, res.data, {
        theme: 'grid',
        drawCell: function (cell, data) {
            console.log("cell text: " + cell.text);
            console.log("Column index: " + data.column.index, "Row index: " + data.row.index);
            console.log("Column data key: " + data.column.dataKey);         
        },
        styles: {
            overflow: 'linebreak',
            fontSize: 8,
            tableWidth: 200,
            tableLineWidth: 0,
            cellPadding: 1, // a number, array or object (see margin below)
        },
        alternateRowStyles: {fillColor: [250,250,250]},
        columnStyles: {
            0: {columnWidth: 30},
            1: {columnWidth: 20},
            2: {columnWidth: 100},
            3: {columnWidth: 100},
        },
        startY: 200,
        fontSize: 8
    });

我已经完成了很多谷歌搜索，似乎drawCell函数是正确的方向，但我无法弄清楚如何从每一行中提取类名，在这种情况下是＆＃34;类别＆＃34;。我的目标是将class="Category"的行更改为不同的背景颜色。如果行的类名为＆＃34;类别＆＃34;？

，如何更改为不同的背景颜色

如果可能，请帮助您提供示例代码。

提前致谢。

Answer 1

在挂钩中，您可以使用cell.raw访问html元素。

jsPDF Autotable - 获取表行的属性

1 个答案: