javascript - jspdf AutoTable : Target style for specific row of a table - Stack Overflow

admin管理员组

文章数量:1279084

I am using jsPDF AutoTable Plugin for my table pdf.

My sources:

#javaScriptIncludeTag("jspdf.min.js")#
#javaScriptIncludeTag("jspdf.plugin.autotable.js")#

My sources are from:

My Script :

$(function() {

    var doc = new jsPDF('p', 'pt', 'a4');
    var $tables2 = $(".pdftable2");
    var startingY = 0;

    $tables2.each(function( index ) {

        var $this = $(this), tableid = $this.attr('id');
        var res = doc.autoTableHtmlToJson(document.getElementById(tableid));
        var offset =  2;
        startingY = doc.autoTableEndPosY() + offset;

        doc.autoTable(res.columns, res.data, {
            startY: startingY,
            pageBreak: 'avoid',
            theme: 'grid',
            styles: {
                overflow: 'linebreak',
                fontSize: 12,
                valign: 'middle'
            },
            columnStyles: {
                0: {valign: "top"}, 
                1: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                2: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                3: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
            }
        });

    }); 

    doc.save('pdf doc');

});

My Markup:

<table class="pdftable2" id="j_info" border="1">
        <tr>
            <th>Group Name</th> 
            <th>Yes</th>    
            <th>NA</th>
            <th>No</th>
        </tr>
        <tr>
            <td colspan="4">Sub Group name</td> 
        </tr>
        <tr>
            <td>
                Phasellus sagittis tristique augue
            </td>
            <td></td>
            <td>X</td>
            <td></td>
        </tr>
    </table>

My header is the group name and the second row after it is sub group name. I want to target the second row with sub group and give a unique style. How do I target that entire row. below is what my table looks like.

IMPORTANT NOTE: Any css style have no effect on the way the pdf looks. I am interested in how the pdf looks not how the actual page looks in the browser. For all it matters, the entire table can be hidden, but jspdf AutoTable will still render it in a pdf.

I am using jsPDF AutoTable Plugin for my table pdf.

My sources:

#javaScriptIncludeTag("jspdf.min.js")#
#javaScriptIncludeTag("jspdf.plugin.autotable.js")#

My sources are from:

https://github./MrRio/jsPDF

https://github./simonbengtsson/jsPDF-AutoTable

My Script :

$(function() {

    var doc = new jsPDF('p', 'pt', 'a4');
    var $tables2 = $(".pdftable2");
    var startingY = 0;

    $tables2.each(function( index ) {

        var $this = $(this), tableid = $this.attr('id');
        var res = doc.autoTableHtmlToJson(document.getElementById(tableid));
        var offset =  2;
        startingY = doc.autoTableEndPosY() + offset;

        doc.autoTable(res.columns, res.data, {
            startY: startingY,
            pageBreak: 'avoid',
            theme: 'grid',
            styles: {
                overflow: 'linebreak',
                fontSize: 12,
                valign: 'middle'
            },
            columnStyles: {
                0: {valign: "top"}, 
                1: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                2: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                3: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
            }
        });

    }); 

    doc.save('pdf doc');

});

My Markup:

<table class="pdftable2" id="j_info" border="1">
        <tr>
            <th>Group Name</th> 
            <th>Yes</th>    
            <th>NA</th>
            <th>No</th>
        </tr>
        <tr>
            <td colspan="4">Sub Group name</td> 
        </tr>
        <tr>
            <td>
                Phasellus sagittis tristique augue
            </td>
            <td></td>
            <td>X</td>
            <td></td>
        </tr>
    </table>

My header is the group name and the second row after it is sub group name. I want to target the second row with sub group and give a unique style. How do I target that entire row. below is what my table looks like.

IMPORTANT NOTE: Any css style have no effect on the way the pdf looks. I am interested in how the pdf looks not how the actual page looks in the browser. For all it matters, the entire table can be hidden, but jspdf AutoTable will still render it in a pdf.

• javascript
• jquery
• jspdf
• jspdf-autotable

Share Improve this question Follow edited Jun 7, 2016 at 13:58 Saad A asked Jun 6, 2016 at 21:50 Saad ASaad A 1,14722 gold badges2323 silver badges4747 bronze badges 1

• 1 You should check out the drawCell hook. There are some examples in the jspdf-autotable repo. I would normally remend the drawRow option, but it currently has some issues – Simon Bengtsson Commented Jun 10, 2016 at 13:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Try the below code to give the styles to cells of particular row.

doc.autoTable({
  html: '#table',
  didParseCell(data) {
    if (data.cell.row.index === 0) {
      data.cell.styles.textColor = [255, 255, 255];
      data.cell.styles.fillColor = '#FF5783';
    }
  }
})

Try this :

$(document).ready(function()
{
  $('tr').find('td').eq(0).addClass('highlight');
});

Example : https://jsfiddle/bneen5rc/

本文标签： javascriptjspdf AutoTableTarget style for specific row of a tableStack Overflow