print html table with css dynamically added by jquery [duplicate] - javascript

This question already has answers here:
CSS #media print issues with background-color;
(22 answers)
Closed 5 years ago.
I have a table in which I make some calculations and eventueel use the jquery function .css() to add new css rules(coloring table background) to the table.
Now when I want to print the page, I get a black and white page without any effect.
How can I print my table while maintaining the table?
I know you can make special stylesheets for printing, but I have currently no clue on how to do this. Any help is welcome.
HTML:
<table id='tbl1' style="width:100%">
<tr>
<th>Name</th>
<th>Location</th>
<th>Amount in kg</th>
</tr>
<tr>
<td>Whole wheat</td>
<td>Line 1</td>
<td>1237</td>
</tr>
<tr>
<td>Whole wheat</td>
<td>Line 2</td>
<td>1341</td>
</tr>
</table>
Code example
table = $('#tbl1').find('td:nth-child(3)').each(function() {
val = parseInt($(this)[0].innerText, 10);
if (val > 1300) {
$(this).css({"background-color": "green"});
}
else {
$(this).css({"background-color": "red"});
}
});
Here is a fiddle example:
https://jsfiddle.net/toofle/jng2h9rp/
Thanks in advance!

Write your css adding media="print" in style tag, that will be applicable to only print section
<style media="print">
// your code
</style>

Related

Custom page margins using print.js

I am attempting to print payment receipt using thermal POS printer using Print.js library. I can successfully print the page using the printjs. But the print comes with extra margins as per A4 page.
Is there any way to print it to fit to 58mm with to page margins?
Also it would be very helpful if any alternatives to print using JavaScript are given. Following is my work.
HTML & JS
<button id="print-receipt">print to pos</button>
<div id="invoice-print-div" class="hidden">
<div class="text-center" style="width:58mm;background-color:red;">
<h4>alpha</h4>
<table border="0">
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
<tr>
<td>abc</td>
<td>1</td>
<td>120</td>
</tr>
<tr>
<td>pqr</td>
<td>2</td>
<td>240</td>
</tr>
<tr>
<td>xyz</td>
<td>4</td>
<td>360</td>
</tr>
</table>
</div>
</div>
<script>
$("#print-receipt").on("click", function() {
printJS("invoice-print-div", "html");
});
</script>
1- Instead of using printJS() with the default two arguments, you can pass an object as argument so:
printJS('invoice-print-div', 'html'); should be replaced with:
printJS({printable: 'invoice-print-div', type: 'html',style: ['#page { size: A4; margin: 0mm;} body {margin: 0;} h4 {margin:0}'], targetStyles: ['*']});
Please note that when it comes to actual printing, the property style in the argument object is where you can pass your custom style that should be applied to the html being printed.
I have made a demo in stackblitz Please do check it out.
For more information you can check PrintJS configuration options
2- As you ask for some alternatives of PrintJS, You can checkout jsPDF Library and here some explanations about it.

Identify element using multiple classes in random arrangement [duplicate]

This question already has answers here:
How can I select an element with multiple classes in jQuery?
(14 answers)
Closed 4 years ago.
Is there a way to get the element using its classes not knowing the arrangement of classes?
I have here a sample HTML
<table>
<tr class="header first test1">
<th>Month</th>
<th>Savings</th>
</tr>
<tr class="header first test2">
<td>January</td>
<td>$100</td>
</tr>
<tr class="h34der third test1">
<td>February</td>
<td>$80</td>
</tr>
</table>
I need to get the element that has header and test1 as its classes
Options I did was the following:
Option #1
$('.header, .test1').css('background','yellow');
However it is incorrect as it color all the elements that has "header" or "test1" class.
Option #2
I saw that this is possible
$("[class*='header first test1']").css('background','yellow');
But my scenario was I do not know the class "first" and the only classes I know are "header" and "test1".
Is there a way to identify the element using multiple classes?
Appreciate your help with this.
Here is my fiddle I used for testing: http://jsfiddle.net/ky8d94n6/
Use $('.header.test1') to select element will class header and test1:
$(document).ready(function(){
$('.header.test1').css('background','yellow');
});
$(document).ready(function(){
$('.header.test1').css('background','yellow');
});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="header first test1">
<th>Month</th>
<th>Savings</th>
</tr>
<tr class="header first test2">
<td>January</td>
<td>$100</td>
</tr>
<tr class="h34der third test1">
<td>February</td>
<td>$80</td>
</tr>
</table>

Cannot get table row selection working with semantic-ui table

I'm trying to adopt Semantic-UI and I'm having some trouble. I'd like to get row selection to work in a table.
I'm using their sample HTML below:
<table class="ui selectable celled table">
https://jsfiddle.net/yjuoqdcy/
You can see that hovering over the rows does nothing. I'm guessing I'm missing some sort of behavior or event hook up but I cannot find much in the documentation.
Thanks for your helps.
It appears that you are using an old version (1.11.8) of the Semantic UI framework. Upgrading to the the latest version will allow you to use row selection without the need of custom CSS.
selectable table was introduced in version 2.0.0. - Release notes
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<table class="ui selectable celled table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No Action</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
</tr>
</tbody>
</table>
Do you mean you want the background of the cell to change colour when you mouse over it?
If so all you need is something like this.
table tr:hover {
background: #CCCCFF;
}
https://jsfiddle.net/link2twenty/cae2k9fy/
You can add custom style to the rows using tr:hover. Do styling as necessary with
tr:hover {
background-color: #f5f5f5;
}
https://jsfiddle.net/Pugazh/yjuoqdcy/3/

Append a new row to a table using jQuery [duplicate]

This question already has answers here:
Adding a table row in jQuery
(42 answers)
Closed 7 years ago.
I'm using the following code trying to append a new row to jquery but it's not working.
$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test#test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
My table is setup like so:
<table class="view-bookings-table mobile-optimised hidden" id="search-results">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
<th scope="col">Car Reg.</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
EDIT
My full code is actually:
$('#search').submit(function(event) {
event.preventDefault();
$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test#test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
});
Your code is fine and works well with every possible version of jQuery.
demo
You may have a jQuery error somewhere else on your page or you are not loading it. Also what is
class='hidden'
doing? Maybe it's just a css issue?

Table - fixed header, scrollable body, most robust/simple solution? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
Looking for a solution to create a table with a scrollable body, and a static/fixed header.
Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc.
To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option.
The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D
I've just put together a jQuery plugin that does exactly what you want. Its very small in size and really easy to implement.
All that is required is a table that has a thead and tbody.
You can wrap that table in a DIV with a classname and the table will always resize to fit in that div. so for example if your div scales with the browser window so will the table. The header will be fixed when scrolling. The footer will be fixed (if you enable a footer). You also have the option to clone the header in the footer and have it fixed. Also if you make your browser window too small and all columns can't fit...it will also scroll horizontally (header too).
This plugin allows the browser to size the columns so they aren't fixed width columns.
you just pass the DIV's classname to the plugin like so: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); and the plugin will do the rest. FooterID is a element on the page that contains the mark-up for your footer. this is used if you want to have pagination as your footer.
If you have multiple tables on the page it will also work for each table you want to have a fixed header.
check it out here: http://fixedheadertable.mmalek.com/
Keep in mind its still 'beta' so I am adding new features and bug fixes daily.
Supported browsers: IE6, IE7, IE8, FireFox, Safari, and Chrome
Here is a link to my response to another person who had the same question: Frozen table header inside scrollable div
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .
The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.
CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.
If you can fix the column widths - it's a lot easier. If you want the browser to figure out the widths, it gets a lot harder. Basically, have the table in div that scrolls (height, overflow:auto) and have that div inside a position:relative div. In the outer div, have another div position:absolute, overflow:hidden, height: whatever the header height is, set this div's innerHTML to the innerHTML of the inner div; Here is a page that demonstrates. There are lots of gotchas, but it's doable...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
Note as you refresh and the data size changes, the header matches up perfectly. That's the real trick.
I believe that the solution is to set an explicit height for the tbody and set the overflow to auto or scroll. Unfortunately, as you've discovered, tables and CSS are a tricky combination, and IE likes to choke on it.
How about this:
<table style="width: 400px;">
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>
There was also a quiz for just this sort of thing on Sitepoint, for those looking for a non-JS solution. However I found that the table footer was necessary for stopping the table headers from collapsing their widths IF the contents of the cells weren't wide enough. I ended up hiding the tfoot in the application I used this on.
It's pure HTML/CSS and works in IE6 plus modern browsers. There are some styling limitations for the header though.

Categories

Resources