jsPDF Autotable - Get The Attribute of a Table Row

Question

I just started to play with jsPDF AutoTable and I really like the plug-in, which would fit my project. However, I am running into a problem of how to identify the class attribute of the table row. For example:

I have a table with some rows have a class="Category" like below.

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

This is my code for the 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
    });

I've done a lot of googling and it seems like that drawCell function is the correct direction, but I could not figure out how to extract the Class Name from the every rows, which in this case is "Category". My goal is to change to rows with class="Category" to a different background-color. How can I change to different background color if a row has class name as "Category"?

Please help with sample code if possible.

Thanks in advance.

Simon Bengtsson Simon Bengtsson · Accepted Answer · 2018-08-04T12:55:14

0

votes

In the hooks you can access the html element with cell.raw.

jsPDF Autotable - Get The Attribute of a Table Row

1 Answers