Formatting HTML print - javascript

I'm trying to have a report, that has a table, whcih could be occupying multiple pages.
In the table footer I need to have the some of all, i.e. I need single table footer to appear once, only at end of the report, not at end of each page.
[If any one can help how to get subtotals at end of each page will be deeply appreciated].
I wrote the below code, which also is loaded here.
The output is as below, whic is buggy.
HTML body:
<body>
<h1>My page</h1>
<button onclick="printContent('t')">Print Content</button>
<div id="t">
<div class="divHeader">Header</div>
<br><br>
<table>
<thead>
<tr>
<th>First Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
</thead>
<tbody>
!-- so many rows of: --!
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</tbody>
<tfoot id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=2>Total</TH> <TH>4923</TH> </TR>
</tfoot>
</table>
<br><br>
<div class="divFooter">Footer</div>
</div>
</body>
javascript for printing the required element:
<script language="javascript">
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
</script>
The styling:
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the current printer page size */
margin: 20mm; /* this affects the margin in the printer settings */
size: A4;
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
}
.divFooter {
position: fixed;
bottom: 0;
}
.divHeader {
position: fixed;
top: 0;
}
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group; page-break-after:auto }
</style>

Related

How to add input cells to a transposed table using CSS, HTML, JavaScript and jQuery?

I am dynamically adding to a transposed table. Adding the headers works; however when I add the table details (td) they appear under the table instead of to the right.
CSS to transpose table:
table { border-collapse: collapse; }
tr, tbody { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
Table HTML:
<table>
<tr id="tableHeaders">
<!-- Place for exercise headers -->
</tr>
<tbody id="tableBody">
<tr>
<td>20/04/2021</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>27/04/2021</td>
<td>21</td>
<td>11</td>
</tr>
<!-- Place for exercise details -->
</tbody>
</table>
js to populate table:
//Populate the variable number of headers and keep count.
var numHeaders = 1;
$("<th>Date</th>").appendTo($("#tableHeaders"));
$.each(responseJson1a, function() {
$("<th>"+ this.edeType + " - " + this.edeUnit + "</th>").appendTo($("#tableHeaders"));
numHeaders++;
});
//Create an input detail cell for each header
$("<tr>").appendTo($("#tableBody"));
for(let i = 0; i < numHeaders; i++) {
$("<td><input></td>").appendTo($("#tableBody"));
}
$("</tr>").appendTo($("#tableBody"));
This is the result:
The table should look like:
This is what the table would look like when not transposed:
You are adding inputs inside tbody not inside any tr tag . So , you can just use :last this will refer tr tag which is added last and then inside this tr you can add your inputs .
Demo Code :
//just for demo..
var responseJson1a = [{
"edeType": "Speed",
"edeUnit": "km/h"
}, {
"edeType": "Speed",
"edeUnit": "km/h"
}]
var numHeaders = 1;
$("<th>Date</th>").appendTo($("#tableHeaders"));
$.each(responseJson1a, function() {
$("<th>" + this.edeType + " - " + this.edeUnit + "</th>").appendTo($("#tableHeaders"));
numHeaders++;
});
$("<tr></tr>").appendTo($("#tableBody"));//new tr..
for (let i = 0; i < numHeaders; i++) {
$("<td><input></td>").appendTo($("#tableBody tr:last")); //append to last tr which is added
}
table {
border-collapse: collapse;
}
tr,
tbody {
display: block;
float: left;
}
th,
td {
display: block;
border: 1px solid black;
padding: 2px;
height: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tbody id="tableBody">
<!--move it inside-->
<tr id="tableHeaders">
</tr>
<tr>
<td>20/04/2021</td>
<td>20</td>
<td>10</td>
</tr>
<tr>
<td>27/04/2021</td>
<td>21</td>
<td>11</td>
</tr>
<!-- Place for exercise details -->
</tbody>
</table>

I can't figure out why the javascript generated <tr> elements aren't being styled by my stylesheet

I'm trying to make a table with the background color alternating for every other row element. The styling seems to work for the row elements already in the html code, but when I generate some more rows using javascript, the new rows aren't styled and I can't figure out why. Any help would be appreciated.
/* class Definitions
*******************/
class ladder{
constructor(){
this.data;
}
async getLeaderBoard(){
try{
const ret = await fetch(`https://cors-anywhere.herokuapp.com/https://aoe2.net/api/leaderboard?game=aoe2de&leaderboard_id=3&start=1&count=10`);
this.data = await ret.json();
}
catch(error){
console.log(error);
}
}
}
//table DOM functions
const renderCell = player => {
const markup = `
<tr class="player-entry">
<td>${player.rank}</td>
<td>${player.rating}</td>
<td><a href= "">${player.name}</td>
<td>${player.games}</a></td>
<td>${Math.round(100*player.wins/player.games)/100}</td>
</tr>`;
document.querySelector('.leaderboards').insertAdjacentHTML('beforeend', markup);
};
const renderTable = leaderBoard =>{
leaderBoard.forEach(renderCell);
}
/***********************
/*MAIN
/***********************/
/*store data in window*/
const state = {};
/*
* Fetch the data and save in state array
*/
const dataFetcher = async () =>{
//store the ladder object in state array
state.AOELadder = new ladder();
//load ladder from api
await state.AOELadder.getLeaderBoard();
//update to UI
renderTable(state.AOELadder.data.leaderboard);
}
dataFetcher();
.leaderboards{
width:80%;
text-align: left;
margin-left:3rem;
margin-top:3rem;
line-height: 1.4rem;
border:#888888 solid 1px;
border-collapse: collapse;
}
.leaderboards .title{
border-bottom:#888888 solid 1px;
background:#222222;
color:#fff;
height:2rem;
}
.leaderboards a{
text-decoration: none;
color:#fff;
}
.leaderboards .player-entry{
background: #999999;
border-bottom:#888888 solid 1px;
color:#fff;
}
.leaderboards .player-entry:nth-child(odd){
background: #222222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Practice Fetching API Data </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="leaderboards">
<tr class="title">
<th>Rank</th>
<th>Rating</th>
<th>Name</th>
<th>Games</th>
<th>Win Rate</th>
</tr>
<tr class="player-entry">
<td>565</td>
<td>1500</td>
<td>dummy-entry</td>
<td>1000</td>
<td>55%</td>
</tr>
<tr class="player-entry">
<td>565</td>
<td>1500</td>
<td>dummy-entry</td>
<td>1000</td>
<td>55%</td>
</tr>
<tr class="player-entry">
<td>565</td>
<td>1500</td>
<td>dummy-entry</td>
<td>1000</td>
<td>55%</td>
</tr>
</table>
<script type="text/javascript" src= "./main.js"></script>
</body>
</html>
The table tag automatically appends tbody element (TABLE must have one or more TBODY elements) to wrap the rows. Therefore, you need to add the row inside the body in order to determine alternation.
Just update your inserting script to this:
document.querySelector('.leaderboards').getElementsByTagName('tbody')[0].insertAdjacentHTML('beforeend', markup);

javascript prompt not showing

I am trying to create some code for a class that prompts the user to input three numbers then preforms some calculations to those numbers, the math is to square one number, multiply and multiply the number by PI then display them in the appropriate cells. Right now my onClick is not working and there is no prompt coming up for the user. I have the min and max functions in there so because it's required
Here is my code:
function promptForNumber(promptString, min, max) {
Array.prototype.max = function() {
return Math.max.apply(null, this);
};
Array.prototype.min = function() {
return Math.min.apply(null, this);
};
}
function populateRow(row) {
var number = promptForNumber("Enter your number");
row.cells[0].innerHTML = number;
row.cells[1].innerHTML = Math.pow(number, 2);
row.cells[2].innerHTML = (number / Math.PI).toFixed(4);
}
function isNotANumber(NaN) {
var isNotANumer = promptForAValidNumber("Please enter a
valid number ")
}
table,
th,
tr,
td {
border-collapse: collapse;
}
table {
width: 80%;
margin: 10%;
}
th {
width: 33%;
border: 2px solid black;
justify-content: space-evenly;
height: 25px;
background-color: white;
}
td {
border: 1px solid black;
padding: 1%;
text-align: center;
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 2</title>
</head>
<body>
<table>
<tr>
<th>Number</th>
<th>Squared</th>
<th>Divided by Pi</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
This looks like a homework question as you mentioned it's for a class, so I cannot give you the exact solution to the problem. However, I will point out what is wrong with your code at the moment.
You mentioned that your "onClick" is not working, but you do not have any onClick functions in this code.
You need to use the window.prompt() method to prompt for user input in JS.
You need to create a button that the user can press to receive an alert. Add an event listener onto this button that prompts the user to enter a number. You can get help with this here. After you have the number from the prompt stored in a variable, use that variable to perform the different mathematical operations, and have these be added to the table.
You have extra line in your prompt code, please correct your code like below:
function isNotANumber(NaN) {
var isNotANumer = promptForAValidNumber("Please enter a valid number")
}
Also you must use standard method of prompt:
https://www.w3schools.com/jsref/met_win_prompt.asp
Infact you need to add the event listerner to listen for the click events.
May something like
<html lang="en">
<head>
<title>Assignment 2</title>
<style>
table, th, tr, td {
border-collapse: collapse;
}
table {
width: 80%;
margin: 10%;
}
th {
width: 33%;
border: 2px solid black;
justify-content: space-evenly;
height: 25px;
background-color: white;
}
td {
border: 1px solid black;
padding: 1%;
text-align: center;
background-color: greenyellow;
}
</style>
</head>
<body>
<table>
<tr>
<th>Number</th>
<th>Squared</th>
<th>Divided by Pi</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
function promptForNumber(promptString, min, max) {
Array.prototype.max = function() {
return Math.max.apply(null, this);
};
Array.prototype.min = function() {
return Math.min.apply(null, this);
};
}
function populateRow(row) {
var number = window.prompt("Enter your number");
var cell = row.getElementsByTagName("td");
cell[0].innerHTML = number;
cell[1].innerHTML = Math.pow(number, 2);
cell[2].innerHTML = (number / Math.PI).toFixed(4);
}
function isNotANumber(NaN) {
var isNotANumer = promptForAValidNumber("Please enter a valid number")
}
var table = document.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
console.log('rows', rows);
for (let i = 0; i < rows.length; i++) {
let currentRow = table.rows[i];
currentRow.addEventListener("click", function() {
populateRow(currentRow);
})
};
</script>
</body>
</html>
For me, the answer was putting the script tag of the JS file at the end of the HTML body tag.
<body>
<h1>Todo List</h1>
<ul>
<li>"new" - Add a Todo</li>
<li>"list" - List all Todos</li>
<li>"delete" - Remove specific Todo</li>
<li>"quit" - Quit App</li>
</ul>
<script src="app.js"></script>
</body>
</html>

Apply CSS "stripe" effect to dynamically-inserted table rows in JavaScript

I have made a table. In that, when I click on button, a row is added. I want to assign alternate color to the row inserted.
$("#new-row").click(function() {
$('#first').clone(true).insertAfter('#demo tbody>tr:last');
if ($('#demo tr:last').hasClass("lgrey")) {
$('#demo tr:last').removeClass("lgrey");
$('#demo tr:last').addClass("dgrey");
} else if ($('#demo tr:last').hasClass("dgrey")) {
$('#demo tr:last').removeClass("dgrey");
$('#demo tr:last').addClass("lgrey");
};
});
.lgrey {
background-color: #eee;
}
.dgrey {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr class="lgrey" id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>
But running this code does not give desired result.
Please help in assigning an alternate color to inserted rows.
You don't need JavaScript for this . . . use the :nth-child(an+b) selector instead. This approach is much clearer than messing around with unnecessary classes and jQuery code.
Replace the .lgrey and .dgrey selectors with #demo tr:nth-child(2n+2), and #demo tr:nth-child(2n+3), respectively.
(Note that using even and odd, as some others have suggested, will not allow you to leave the header row unstyled.)
$('#new-row').click(function () {
$('#first').clone(true).insertAfter('#demo tr:last')
})
#demo tr:nth-child(2n+2) {
background-color: #eee;
}
#demo tr:nth-child(2n+3) {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>
Use tr:nth-child css property like:
tr:nth-child(even) {
background-color: #004400;
}
tr:nth-child(odd) {
background-color: #000000;
}
It will handle the alternate color for each tr either generated static or dynamic.
You should really use CSS's nth-child(even) and nth-child(even)for this.
$("#new-row").click(function() {
$('#first').clone(true).insertAfter('#demo tbody>tr:last');
});
tr:nth-child(even) {
background-color: #eee;
}
tr:nth-child(odd) {
background-color: #ccc;;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr class="lgrey" id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>
Use css to handle alternate row colors
tr:nth-child(even) {
background-color: #eee;
}
tr:nth-child(even) {
background-color: #ccc;
}
DEMO
I select row color before add new row as following:
$("#new-row").click(function() {
if ($('#demo tr:last').hasClass("lgrey")) {
var add = "dgrey";
var remove = "lgrey";
} else if ($('#demo tr:last').hasClass("dgrey")) {
var add = "lgrey";
var remove = "dgrey";
};
$('#first').clone(true).insertAfter('#demo tbody>tr:last');
$('#demo tr:last').removeClass(remove);
$('#demo tr:last').addClass(add);
});
.lgrey {
background-color: #eee;
}
.dgrey {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
<tr class="lgrey" id="first">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<button id="new-row">ADD ROW</button>

Displaying JavaScript

I am still stuck on what should seem to be a simple concept. I have a very very simple javascript that just does some addition and I want to display the result on a web page. I have tried using a tag but that did not seem to do anything, an now I am trying to use the from the html but that is not working either. This seems like it should be such a simple thing to do but I am obviously missing something. Any help would be greatly appreciated. I have attached the html code, the script, and the css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="title">
<p><img src="logo.jpg" alt="The Lighthouse" />
</p>
<p>The Lighthouse<br />
543 Oak Street<br />
Owensboro, KY 42302<br/>
(270) 555-7511
</p>
</div>
<div id="data_list">
<table rules="rows" cellspacing='0'>
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011-09-18</td>
<td id="amount1">125</td>
<td>Nina</td>
<td>Largent</td>
<td>88 Regal Lane<br />Willaimsburg, KY 40789</td>
</tr>
<tr class="yellowrow">
<td>2011-09-18</td>
<td id="amount2">75</td>
<td>Mike</td>
<td>Hunt</td>
<td>404 Barrow Street<br />London, KY 40742</td>
</tr>
<tr>
<td>2011-09-16</td>
<td id="amount3">50</td>
<td>Monica</td>
<td>Lang</td>
<td>743 Stawlings Drive<br />Danville, KY 40423</td>
</tr>
<tr class="yellowrow">
<td>2011-09-15</td>
<td id="amount4">150</td>
<td>William</td>
<td>McKnight</td>
<td>404 Barrow Street<br />Danville, KY 40423</td>
</tr>
<tr>
<td>2011-09-14</td>
<td id="amount5">250</td>
<td>Latrina</td>
<td>Hults</td>
<td>750 Whitehall Road<br />London, KY 40742</td>
</tr>
<tr class="yellowrow">
<td>2011-09-13</td>
<td id="amount6">50</td>
<td>Danny</td>
<td>Shamblin</td>
<td>123 Smith Street<br />Owensboro, KY 42303</td>
</tr>
</tbody>
</table>
</div>
<div id="totals">
<table rules="groups" cellspacing="1">
<thead>
<tr>
<th id="sumTitle" colspan="2">Summary</th>
</tr>
</thead>
<tbody>
<tr>
<th>Contributors</th>
<td id="contributions"> </td>
</tr>
<tr>
<th>Amount</th>
<td id="amount"> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
__
// JavaScript Document
window.onload = function ()
{
//find the div tags called amount1, amount2, ...amount6
var amount1 = 125;
var amount2 = 75;
var amount3 = 50;
var amount4 = 150;
var amount5 = 250;
var amount6 = 50;
var totalAmount = amount1 + amount2 + amount3 + amount4 + amount5 + amount6;
var totalContributors = 6;
$("contributions").value = totalAmount.toFixed(2);
}
__
#title {
width: 600px;
text-align:right;
color: rgb(192,142,90);
border-bottom: 1px solid rgb(232,182,130);
margin-bottom:9px;
font-size:10pt;
height: 100px;
}
#title img {
float: left;
}
#data_list {
float: left;
}
table {
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid brown;
margin-right: 20px;
}
.yellowrow {
background-color: yellow;
}
th {
color: white;
background-color: brown;
padding: 2px 5px;
}
td {
vertical-align: top;
padding: 2px 5px;
}
.amt {
text-align: right;
}
#totals table {
font-size: 12pt;
border: solid black 1px;
}
#totals table th {
text-align: left;
}
#totals table td {
text-align: right;
width: 75px;
}
#totals table #sumTitle {
text-align: center;
background-color: yellow;
color: black;
}
In the below line:
$("contributions").value = totalAmount.toFixed(2);
You have forgot # as contributions is id of td so use this:
$("#contributions").html(totalAmount.toFixed(2));
And .value is the javascript and you are using jQuery so use .html function instead of .value .
And you have not added jquery library in your HTML page, add jquery library also.
And If your JS is in different file then add the file also in the code.
Use this:
<script type="text/javascript" src="your/file/path/*.js"></script>
$("contributions").value = totalAmount.toFixed(2);
this should probably be:
$("#contributions").html(totalAmount.toFixed(2));
So instead it does target the contributions td (based on id because of # just like in css).
And the html sets the innerHTML, you could just use text() instead if it's just plaintext.
2 issues I see:
1) you should be looking for $("#contributions") since you are querying by id.
2) since contributions is a td you should use its innerHTML property to set content, rather than value.

Categories

Resources