dimanche 8 mai 2022

How to change text color of entire row in autotable

Anybody knows how to to change the text color of the specific row on #PDF_content3 based on the cell value of column 2... The table (called PDF_content3) in HTML has a checkbox on last cell. I want to change the text color of the entire row where checkbox has checked value.

Thank you.

Here is my script;

<script type="text/javascript">
function generate() { 
<?php
$path = $row['MODEL_PICTURE'];
$m_name = $row['MODEL_NAME'];
list($width, $height, $type, $attr) = getimagesize($row['MODEL_PICTURE']);
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
?>

var doc = new jsPDF('p', 'pt', 'a4');
var model_image = <?php echo json_encode($base64); ?>;
var model_width = <?php echo json_encode($width); ?> / 1.5;
var model_height = <?php echo json_encode($height); ?> / 1.5;
var model_name = <?php echo json_encode($m_name); ?>;
var pageHeight = doc.internal.pageSize.height;
var pageWidth = doc.internal.pageSize.width;

doc.text(model_name, pageWidth/2, 70, { align: 'center' });
doc.addImage(model_image, (pageWidth - model_width) / 2 , 100, model_width, model_height);
doc.autoTable(
    {  
    html: '#PDF_content2',
    margin: {left: 170},
    startY: model_height + 130,
    theme: 'grid',  
    columnStyles: {  
        0: {  
            cellWidth: 80,
            halign : 'center',
            fontSize: number = 10,
            
        },  
        1: {  
            cellWidth: 80,
            halign : 'center',
            fontSize: number = 10,
        },  
        2: {  
             cellWidth: 80,
             halign : 'center',
             fontSize: number = 10,
        }  
    },
}); 
doc.autoTable({  
    html: '#PDF_content3',
    startY: doc.lastAutoTable.finalY + 30,  
    theme: 'striped',  
    columnStyles: {  
        0: {  
            cellWidth: 410,
            fontSize: number = 8,
            cellPadding: Padding = 1,
        },  
        1: {  
            cellWidth: 70,
            halign : 'right',
            fontSize: number = 8,
            cellPadding: Padding = 1,
        },  
        2: {  
             cellWidth: 30,
             halign : 'right',
             fontSize: number = 8,
             cellPadding: Padding = 1,
        }  
    },
})  ;
doc.save('Pricing_Details.pdf');  
}
</script>

Here is the HTML Table

<table id="PDF_content3" class="table-striped table-bordered" style="padding-top: 20px; padding-bottom: 20px; width:-webkit-fill-available; ">
<thead>
<tr style="background-color: #263238; color: blanchedalmond;">
<th align="left" scope="col" colspan="1">Option Name</th>
<th align="center" scope="col" colspan="2">Option Prices</th>
</tr>
</thead>
<?php
  if ($_POST) {
            $sorgu = $baglanti->query("SELECT * FROM price_options WHERE OPTION_MODEL like '$selected' ");
            if($conn==0){
                while ($sonuc = $sorgu->fetch_assoc()) {
            ?>
                    <tr>
                    <td data-label="Option Name" align="left"><?php echo $sonuc["OPTION_NAME"] ?></td>
                    <td data-label="Option Price" align="right"><?php echo number_format($sonuc["OPTION_PRICE"]) ?></td>
                    <td data-label="Include" align="center"><?php echo "<input name='product' type='checkbox' onclick='totalIt()' value=" . $sonuc["OPTION_PRICE"] . ">" ?></td>
                    </tr>
                <?php
                
                
        }
    }
 } 
        ?>
</table>



Aucun commentaire:

Enregistrer un commentaire