A for loop that remembers the previous i - javascript

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p">Click the button to insert new cell(s) at the beginning of the first table row.</p>
<div id="console" style="border-style: dashed;">
length: <input type="text" id="length">
color: <input type="color" id="color">
<br>
<button onclick="myFunction()">Try it</button>
</div>
<br>
<div id="resultArea" style="border-style: dashed;">
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</div>
<br>
<script>
//constant variables
var x = 0;
var y = 0;
var cursor = 0;
function myFunction() {
var cursorInstant = cursor;
for(var i=cursorInstant; i<(document.getElementById("length").value+cursorInstant); i++){
x = Math.floor(i/12);
y = i%12;
document.getElementById("myTable").rows[x].cells[y].style.backgroundColor = document.getElementById("color").value;
cursor = i+1;
}
}
</script>
</body>
</html>
So there is a Number that I input, and there is a for loop
What i want is this:When Number = 3, for loop loops from 0-2. Another Number input = 4, for loop loops from 3-6.Another another Number input = 10, for loop loops from 7-16.
My solution is that I have a constant (say A)
for loop statement will be something like
for(i=A; i< Number + A< i++){...}
And inside the loop, A will increment at some point.
but for some reason, my loop loops from A to 10times of (Number + A)
I don't understand


for(i=A; i< Number + A; i++)
{
...
}
A = A + Number
If you change the value of var Number inside the loop, the factor (Number + A ) increases each time, Sometime it may be endless

Related

make table display part to part

I have a table with 4 rows and columns, I want to first show half of it and then show half of the rest. How to do it?
I have tried this js code with event fadeIn() but not working:
$.fn.slide=function(){
var self=this,kids=self.children()
setInterval(function(){
kids.filter(':hidden').fadeIn()
$(this).appendTo(self)
kids=self.children()
},1000)
return this
}
$(function(){
$('tbody').slide()
})
My html:
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Like first display rows from 1->8 and after that delete it, display from 9->16.

The first mistake is that in the setInterval you used this which referred to window and not the table as I think you thought, using the code below every x seconds you will have the data change:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setInterval(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Instead if you need just one time slide you need setTimeout like:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setTimeout(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Reference:
setInterval
setTimeout

How create a printable report using html and css with ASP.NET Core?

I want to design a report with HTML and CSS, but I do not know how these forms are designed. Forms such as pay slips that can also be printed. See the pictures I posted below. Please help me. Thank you

You can try to use colspan and rowspan.Here is a simple demo:
<table width="100%">
<tr>
<td colspan="9">first line</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">
4
</td>
<td rowspan="2">
5
</td>
<td>6</td>
<td>7</td>
<td rowspan="2">8</td>
<td rowspan="2">9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<style>
table, th, td {
border: 1px solid black;
text-align:center;
}
</style>
result:
You can also change width,height,text-align or background for each tr/td.

There are many templates and tutorials you can use on the internet to find the design you are looking for.
The only thing to consider is to use width:100% so your forms become fixed well on the page, also use margin:10px (10px is example) to make sure your report stays inside your page.

Print Header and footer keeps repeating html

I'm having a trouble title header and footer keeps repeating on every pages when prints I just want to display title at the top of the page and display the footer at the end of the print page. Can anyone help me ,suggest or provide solution you can see my fiddle or html code below thank you!
Fiddle
entire html
<html>
<head>
<title></title>
<style>
#media screen
{
.noPrint{}
.titles{display:none;}
.footer{display:none;}
}
#media print
{
.noPrint{display:none;}
.title{}
.footer{}
}
</style>
</head>
<body>
<button onclick="printDiv();">Print it</button>
<table class="report-container" name="table" id="table" >
<thead class="report-header">
<th colspan="9"><div class="titles">Title Header <br></div></th>
<tr>
<td>ID Number</td>
<td>Name</td>
<td>Barangay</td>
<td>Sex</td>
<td>Sector</td>
<td>Amount</td>
<td>Signature/thumb</td>
<td>ID </td>
<td>Date Received</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=9><div class="footer">Title Footer</div></td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="report-content-cell">
<div class="main">fas</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</body>
Javascript
<script ="text/javascript">
function printDiv() {
var divToPrint = document.getElementById('table');
var htmlToPrint = '' +
'<style type="text/css">' +
'table td {' +
'border:1px solid #dddddd;' +
'padding:8px;' +
'}' +
'table {' +
'border-collapse: collapse;' +
'width: 100%;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
</script>

Unfortunately, what you're trying to do isn't really part of the spec for thead and tfoot elements. But there are a few "hacks" that you can use to emulate the desired effect. Here is one that comes to mind:
For the table footer, you can set its display to table-row-group, remove it from the table, then append it to the table.
// Make footer visible on last page only
let tbl = document.getElementById('table');
let footer = tbl.getElementsByTagName('tfoot')[0];
footer.style.display = 'table-row-group';
tbl.removeChild(footer);
tbl.appendChild(footer);
For the table header, or really just the title, I would just clone the "title" node, apply the desired styling, prepend it to the table, and remove the original node.
// Make header visible on first page only
let title = document.querySelector('.titles');
let newTitle = title.cloneNode(true);
newTitle.style.textAlign = "center";
newTitle.style.fontWeight = "bold";
tbl.prepend(newTitle);
title.remove();
These blocks can be added to the top of your print function, as shown in the updated Fiddle here: https://jsfiddle.net/5azfn7wu/

Table fix header

When I fix the table header (see code below) at a top position ohter than 0, the body apears above the header when I scroll it.
.test {
padding-top: 50px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
Now I´m using another TH with background color white before the TH with the column names. The code that i´m using now.
.test {
padding-top: 0px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
.spacer {
background-color: white;
position: sticky;
top: 0px;
height: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th colspan="4" class="spacer"></th>
</tr>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
Is there a better solution? I tried to move the body but it doesn´t work.

Instead of padding, use a pseudo element to create that space and make it sticky too:
.test {
position:relative;
}
.test::before {
content:"";
display:block;
background:#fff;
position:sticky;
z-index:3;
top:0;
height: 50px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>

I add position relative to table class and fix it
.test {
padding-top: 0px;
}
th {
background-color: orange;
position: sticky;
top: 0;
}
.spacer {
background-color: white;
position: sticky;
top: 0px;
height: 50px;
}
.table{
position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th colspan="4" class="spacer"></th>
</tr>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>

How do you use Javascript to change the background on a html Table

HTML Table that is happening now
I'm trying to take this HTLM table with numbers on it the first column added to the second equals the third. some of the sum column are not correct. the correct answer is in the fourth column. I need to use Javascript to change the background color of the rows that are not correct and add in the correct number? This is what I have so far? The attached picture is what is coming up to far.
This picture is what the HTML Table is supposed to look like
Please help
for (var m = 0; m < math.length; m++) {
// math[m][0] = the first element of the m-th array (indices start at 0)
// math[m][1] = the second element of the m-th array
// math[m][2] = the third element of the m-th array
document.write(math[m][0] + ' + ' + math[m][1] + ' = ' + math[m][2] + "<br>" +' Actual answer = '+ (math[m][0]+ math[m][1])+ "<br>");
}
</script>
<table class="mathTable" id="math" style="width:80%"; border="1em";>
<tr>
<th>1st Number</th>
<th>2nd Number</th>
<th>Answer</th>
<th>Actual Answer</th>
</tr>
<tr class='calculation'>
<td>5</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>7</td>
<td>6</td>
<td>13</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>5</td>
<td>10</td>
<td>10</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>3</td>
<td>13</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>4</td>
<td>7</td>
<td>11</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>3</td>
<td>9</td>
<td>12</td>
<td>12</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>5</td>
<td>12</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>2</td>
<td>6</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>9</td>
<td>14</td>
<td>14</td>
</tr>
<tr class='calculation'>
<td>6</td>
<td>6</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
Thank you

Tables are made up of rows and cells.
It's a good idea to use the thead and tbody tags in your table,
and recommended to separate the css from the body elements
to change the background color: add a class to the element with the chosen color
const tableMath = document.getElementById('table-math');
for (let line=1; line < tableMath.rows.length; line++)
{
if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
{
tableMath.rows[line].cells[3].classList.add('badAnswer')
}
}
table {
border-collapse: collapse;
width: 80%;
margin: 1em;
}
td,th {
border: solid grey 1px;
padding: 5px;
}
th {
background-color: #7fffd5;
}
td {
text-align: center;
}
.badAnswer {
background-color: #f47c6f;
}
<table id="table-math">
<thead>
<tr>
<th> 1st Number </th>
<th> 2nd Number </th>
<th> Answer </th>
<th> Actual Answer </th>
</tr>
</thead>
<tbody>
<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>
<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
</tbody>
</table>

Categories