I would like to get the values of a selected row from a table.This is what i tried so far and the attached plunkr. https://plnkr.co/edit/QDPh4q0hQdlW09orayyL?p=preview
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' +
document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x"src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr ng-click="getData()">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
It is better to iterate each person via ng-repeat and pass them to your function explicitly instead of hardcoding in HTML and so working with DOM:
$scope.people = [{
name: 'Jill',
lastName: 'Smith',
age: 50
},
....
]
$scope.getData = function(person) {
console.log('Selected person is ' + person.name);
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr ng-repeat='person in people' ng-click="getData(person)">
<td>{{person.name}}</td>
<td>{{person.lastName}}</td>
<td>{{person.age}}</td>
</tr>
</table>
angular.module("MyApp",[])
.controller("MyCtrl", function($scope){
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<table border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
</div>
Try this
$scope.getData=function(event){
console.log(event.target);
}
<tr ng-click="getData($event)">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
Related
There is a table:
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
<td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>raspberry</td>
<td>35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
<td class="cell1 style1"><p style="font-weight:bold;"></p></td>
</tr>
</tfoot>
</table>
How can I sum up all cells in tbody second column and put the result in tfoot cell also second column?
The table is dynamic. I would like to use jquery.
This would be one way of doing it:
let sum=$("#tblPotrawySkladniki tbody td:nth-child(2)").get().reduce((a,c)=>
+$(c).text().replace(",",".")+a,0);
$("#tblPotrawySkladniki tfoot td:nth-child(2)").text(sum);
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
<td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20,3</td>
</tr>
<tr>
<td>raspberry</td>
<td>35,5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
<td class="cell1 style1"><p style="font-weight:bold;"></p></td>
</tr>
</tfoot>
</table>
Instead of parseInt() my script makes use of implicit type conversion with the unary + operator before $(c).text().
You can use jQuery .each() to cycle through the second td of each row, access the contents of the element using $(this).text(), then add them up as you go.
You should parse the value first so that they will add up as numbers and not concatenate.
let values = 0;
jQuery('table tbody tr td:nth-of-type(2)').each(function(){
let value = parseInt($(this).text(),10);
values += value;
});
console.log(values);
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1">
<p style="font-style:italic;">Nazwa produktu</p>
</td>
<td class="cell1 style1">
<p style="font-style:italic;">Waga [g]</p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td> 10</td>
</tr>
<tr>
<td>orange</td>
<td> <span class='price'>20</span></td>
</tr>
<tr>
<td>raspberry</td>
<td> <span class='price'>35</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>
</tfoot>
$(document).ready(function() {
$('.price').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('.price', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('#sum').eq(index).text('Total: ' + total);
}
I've modified a cell on a datatable to show a coloured div which is a gradient depending on score
{
"data": "fert_percent",
"autoWidth": true,
"searchable": true,
"render": function (data, type, row, meta)
{
var ret = "<div class='col' style='background-color: lawngreen;'><div class='col' style='background-color: red; opacity: " + (data / 100) + ";'> </div></div>";
return ret;
}
},
The code works fine viewing the table but if I export to PDF, the cell is empty.
How can I make the exported PDF show the modified cell?
The pdfMake library doesn't support opacity on the background colour, it only applies to the font. If you're wondering why that is, it's because the PDF format is unrelated to the CSS standard.
That said, you can export different colours if you update the pdfMake document before DataTables sends it off to the file generator:
(Note: I didn't bother putting the greens into the DataTable version, only the PDF export)
$(document).ready(function() {
$('#example').DataTable({
columns: [{
"data": "name"
},
{
"data": "position"
},
{
"data": "office"
},
{
"data": "age"
},
{
"data": "start_date"
},
{
"data": "salary"
}
],
dom: 'Bfrtip',
buttons: [{
extend: 'pdfHtml5',
text: 'PDF with cell background colour',
customize: function(doc) { // set the cell colours for the PDF
//console.log(doc); // useful if you want to see what the doc object contains
// you can set generate styles like this if you want
//doc.styles["Opac10"] = { opacity: "0.1"};
let table = doc.content[1].table.body;
for (i = 1; i < table.length; i++) // skip table header row (i = 0)
{
table[i][3].text = " "; // couldn't be bothered clearing the Age column sample data above :)
table[i][3].fillColor = "#00" + Math.round((i / 9) * 255).toString(16) + "00"; // ( divided by 9 since 9 rows in my example)
if (table[i][2].text == 'Tokyo') {
table[i][2].fillColor = '#fbed1d'; // yellow
//table[i][2].style = 'Opac10'; // Here's how you can refer to styles from above. Note: opacity only applies to the font, not the background colour in the pdf table cell!!
}
}
}
}],
rowCallback: function(row, data, index) { // sets the cell colours for DataTables
if (data.office == "Tokyo") {
$('td:eq(2)', row).css('background-color', '#fbed1d'); // yellow
}
}
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>320800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>170750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>86000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>433060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>162700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>372000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>137500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>327900</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>112000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
I want to filter this table's rows on content in every except for what's inside the . Is it possible?
With this script, if I search for "John", I want to return only the row with john#example.com. I want to ignore the the that contains "john".
I can't seem to make it work.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).not('.demolist').text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search..">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com
<div class='demolist'>john</div>
</td>
</tr>
</table>
Maybe there's another way to this, but I got using the function $(this).detach() for the divs with class "demolist" to remove from the DOM, then the search doesn't reach there. But to put it in the DOM again you have to tell where (by id or class), so I create another DIV beteween the "demolist" called "append" to use the function $(this).append(elem[index]) . I used jQuery each to list all elements in the class. Like this:
HTML
<input id="myInput" type="text" placeholder="Search..">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com<div class="append">
<div class='demolist'>Mary</div></div></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com<div class="append">
<div class='demolist'>John</div></div> </td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var elem = $(".demolist");
var ap = $(".append");
elem.each(function(index, el) {
$(this).detach();
});
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
ap.each(function(index, el) {
$(this).append(elem[index]);
});
});
});
You can see the working example in this fiddle: https://jsfiddle.net/cm3ns1wx/
I'm trying to make a table that when you click on it the clicked row turns green and the value that is in the table gets counted, right now it just counts the amount of rows clicked but I want to change this to the amount that is under the value.
$(function() {
var countEl = $("#count");
var countE2 = $("#Value")
var count = 0;
$('tbody tr').click(function() {
$(this).toggleClass("green-cell");
if ($(this).hasClass("green-cell")) {
count++;
} else {
count--;
}
countEl.html(count);
});
});
.green-cell {
background: rgb(29, 247, 0);
}
table {
border-collapse: collapse;
}
td,
th {
border: solid 1px #cccccc;
}
td,
th {
padding: 5px;
}
tbody tr {
cursor: pointer;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Count: <span id="count"> 0</span>
<br/><br/>
<table class="table " id="onclick">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>2</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>3</td>
</tr>
<tr>
<td>henk</td>
<td>janssen</td>
<td>4</td>
</tr>
<tr>
<td>piet</td>
<td>Paulisma</td>
<td>5</td>
</tr>
<tr>
<td>Theo</td>
<td>van gogh</td>
<td>6</td>
</tr>
<tr>
<td>Erik</td>
<td>Doerustig</td>
<td>7</td>
</tr>
<tr>
<td>Jan</td>
<td>de steen</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
</body>
Get the row's last TD element by using .eq( -1 )
Get it's .text() and use parseInt to convert string to integer:
$(function() {
var countEl = $("#count");
var countE2 = $("#Value")
var count = 0;
$('tbody tr').click(function() {
var $td = $(this).find("td").eq( -1 ); // Get desired row's cell
var tdVal = parseInt( $td.text(), 10); // Convert content string to integer
$(this).toggleClass("green-cell");
if ($(this).hasClass("green-cell")) {
count+= tdVal;
} else {
count-= tdVal;
}
countEl.html(count);
});
});
.green-cell {
background: rgb(29, 247, 0);
}
table {
border-collapse: collapse;
}
td,
th {
border: solid 1px #cccccc;
}
td,
th {
padding: 5px;
}
tbody tr {
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
Count: <span id="count"> 0</span>
<br/><br/>
<table class="table " id="onclick">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>2</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>3</td>
</tr>
<tr>
<td>henk</td>
<td>janssen</td>
<td>4</td>
</tr>
<tr>
<td>piet</td>
<td>Paulisma</td>
<td>5</td>
</tr>
<tr>
<td>Theo</td>
<td>van gogh</td>
<td>6</td>
</tr>
<tr>
<td>Erik</td>
<td>Doerustig</td>
<td>7</td>
</tr>
<tr>
<td>Jan</td>
<td>de steen</td>
<td>8</td>
</tr>
</tbody>
</table>
If I understand what your trying to do correctly, which is add the value found in the count column when you click a row you could do something like this:
var countEl = $("#count");
var countE2 = $("#Value")
var count = 0;
$('tbody tr').click(function() {
$(this).toggleClass("green-cell");
if ($(this).hasClass("green-cell")) {
count += parseInt($(this).find('td:last-of-type()').text());
} else {
count -= parseInt($(this).find('td:last-of-type()').text());
}
countEl.html(count);
});
Just change this:
$('tbody tr').click(function() {
$(this).toggleClass("green-cell");
if ($(this).hasClass("green-cell")) {
count++;
} else {
count--;
}
countEl.html(count);
});
To this:
$('tbody tr').click(function() {
$(this).toggleClass("green-cell");
var value = parseInt($(this).children("td:last").html());
if ($(this).hasClass("green-cell")) {
count +=value;
} else {
count -=value;
}
countEl.html(count);
});
We grab the last TD, the one with the value, and convert that to INT with parseInt
If I understand you correct you want to have the sum of all values of column "Count".
By now you're just increasing your local counter. Instead you need to get the value of the column Count and add it to your current value.
So basically you need to change your Javascript like this
$(function() {
var countEl = $("#count");
var countE2 = $("#Value")
var count = 0;
$('tbody tr').click(function() {
$(this).toggleClass("green-cell");
var curCount = parseInt($(this).find('td:last').text());
if ($(this).hasClass("green-cell")) {
count = count + curCount;
} else {
count = count - curCount;
}
countEl.html(count);
});
});
My jQuery is pretty rusty, but what you in essence want to do here is find your last table cell in the clicked row and add/subtract that instead of just incrementing/decrementing your counter.
let amount = Number.parseInt($el.children('td').last().text());
This line is saying that the amount is equal to an integer found at the last td of the clicked row. Then you would add it to your count, the only other complication is the need to subtract if the cell isn't active, it is generally good practice to avoid else conditions (helps remove catch all unexplained effects) so I edited the code to add in all cases and to make the number negative in the case of an inactive cell.
$(function() {
const $countEl = $('#count');
let count = 0;
$('tbody').on('click', 'tr', function() {
const $el = $(this);
let amount = Number.parseInt($el.children('td').last().text());
$el.toggleClass('green-cell')
if (!$el.hasClass('green-cell')) {
amount = -amount;
}
count += amount;
$countEl.text(count);
});
});
.green-cell {
background: rgb(29, 247, 0);
}
table {
border-collapse: collapse;
}
td,
th {
border: solid 1px #cccccc;
}
td,
th {
padding: 5px;
}
tbody tr {
cursor: pointer;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Count: <span id="count"> 0</span>
<br/><br/>
<table class="table " id="onclick">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>2</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>3</td>
</tr>
<tr>
<td>henk</td>
<td>janssen</td>
<td>4</td>
</tr>
<tr>
<td>piet</td>
<td>Paulisma</td>
<td>5</td>
</tr>
<tr>
<td>Theo</td>
<td>van gogh</td>
<td>6</td>
</tr>
<tr>
<td>Erik</td>
<td>Doerustig</td>
<td>7</td>
</tr>
<tr>
<td>Jan</td>
<td>de steen</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
</body>
You can grab the amount from the last cell from the row by using cells property of the <tr> element.
const amount = +this.cells[this.cells.length - 1].innerText;
if ($(this).hasClass("green-cell")) {
count += amount
} else {
count -= amount
}
Then, instead of incrementing or decrementing, use this value to add/subtract.
$(function() {
var countEl = $("#count");
var countE2 = $("#Value")
var count = 0;
$('tbody tr').click(function() {
$(this).toggleClass("green-cell");
const amount = +this.cells[this.cells.length - 1].innerText;
if ($(this).hasClass("green-cell")) {
count += amount
} else {
count -= amount
}
countEl.html(count);
});
});
.green-cell {
background: rgb(29, 247, 0);
}
table {
border-collapse: collapse;
}
td, th {
border: solid 1px #cccccc;
}
td, th {
padding: 5px;
}
tbody tr {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Count: <span id="count"> 0</span>
<table class="table " id="onclick">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>2</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>3</td>
</tr>
<tr>
<td>henk</td>
<td>janssen</td>
<td>4</td>
</tr>
<tr>
<td>piet</td>
<td>Paulisma</td>
<td>5</td>
</tr>
<tr>
<td>Theo</td>
<td>van gogh</td>
<td>6</td>
</tr>
<tr>
<td>Erik</td>
<td>Doerustig</td>
<td>7</td>
</tr>
<tr>
<td>Jan</td>
<td>de steen</td>
<td>8</td>
</tr>
</tbody>
</table>
I try to convert html design to pdf using this <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
I tried to design table as i want,
the table looks in html like
but when i try to convert pdf it become
my html code
<div id="content">
<table id="example1" class="display table table-bordered table-striped row-
border order-column" cellspacing="0" width="auto">
<thead style="background-color: #b6b37e">
<tr>
<th>No</th>
<th>PO Number</th>
<th>Article Code</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listData">
<td>{{x.nomer}}</td>
<td>{{x.po_code}}</td>
<td>{{x.article_code}}</td>
<td>{{x.long_description}}</td>
<td>{{x.qty}}</td>
<td >{{x.price | number:0}}</td>
<td>{{x.discountpct}}</td>
</tr>
</tbody>
</table>
</div>
this my Javascript code
<script>
function onClick() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 100 * 8.5;
var isi = document.getElementById("content");
pdf.fromHTML(isi);
pdf.save('Purchase_Order.pdf');
};
var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
</script>
how to make my pdf file same like html design?
Use html2canvas with jsPDF. Alone jsPDF can not keep css style.
You must need some plugin with jsPDF.
Below is working example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button id="clickbind">Click</button>
<div id="content">
<table id="example1" class="display table table-bordered table-striped row-
border order-column" cellspacing="0" width="auto">
<thead style="background-color: #b6b37e">
<tr>
<th>No</th>
<th>PO Number</th>
<th>Article Code</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listData">
<td>{{x.nomer}}</td>
<td>{{x.po_code}}</td>
<td>{{x.article_code}}</td>
<td>{{x.long_description}}</td>
<td>{{x.qty}}</td>
<td>{{x.price | number:0}}</td>
<td>{{x.discountpct}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function onClick() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test.pdf');
}
});
};
var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="Print Div Contents" id="btnPrint" />
<div>
<table>
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
<script type="text/javascript">
$("#btnPrint").click(function () {
let doc = new jsPDF('p', 'pt', 'a4');
doc.addHTML(document.body, function () {
doc.save('testpoc.pdf');
});
});
</script>
</html>