I have a very long table with horizontal scrolling. Is it possible to implement a fixed row inside this table without horizontal scroll.
<div class="container" style="width:500px;height:100px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;height:200px;left:0;right:0">
<td colspan="7" style="width:500px;">
<div id="noscroll" style="display: inline-block;">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
EDIT: What if I need two cell in the fixed row?
<tr class="fixed-row">
<td colspan="3">
A row unaffected by
</td>
<td colspan="3">
horizontal scroll
</td>
</tr>
https://jsfiddle.net/7nz6ys2m/2/
Try the following:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0">
<td colspan="7" style="width:500px;height:22px;position: relative;">
<div id="noscroll" style="display: inline-block;position: fixed;transform: translateY(-50%);">
A row unaffected by horizontal scroll
</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
What I did:
Give the noscroll-div position:fixed; and reset its position with transform. Then I set the height of its parent td to a fixed height of 22px (the other td are all 22px) and set its position to relative.
In case you need multiple td in the fixed row, I would rather take multiple div inside one td, and float them left. see this:
<div class="container" style="width:500px;overflow:auto;position:relative;">
<table style="width:1500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr style="width:500px;left:0;right:0;height:22px;position: relative;">
<td style="position: fixed;" colspan="7">
<div style="width:250px;float: left;">
test1
</div>
<div style="width:250px;float:left;">
test2
</div>
</div>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
With a little bit of jQuery, we can get the behavior with safe vertical scrolling.
<div class="container" style="width:500px;height:300px;overflow:auto;">
<table style="width:1500px;height:500px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr style="">
<td colspan="6" style="">
<div class="fixed-row">A row unaffected by horizontal scroll</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(".container").scroll(function () {
$(".fixed-row").css("margin-left",$(".container").scrollLeft() + "px");
});
</script>
<style>
table{
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
.fixed-row {
display: inline-block;
width: 500px;
text-align: center;
}
</style>
https://jsfiddle.net/7nz6ys2m/4/
Related
I'm having a trouble on how can I set automatically my footer to display in last page to meet the proper printing of pages, but it seems it has a conflict below. Is there any idea or solution on how to display the footer in the last page?
Is there any expert can suggest or help me, please see the attachment thanks in advance!
html
<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 >
<th ><div class="footer"></div></th>
<th colspan="2"> <div class="footer">TOTAL NO. OF PERSONS </div>
</th>
th colspan="2" ><div class="numbers">20</div></th>
</tr>
<tr>
<th class="footer"></th>
<th colspan="2" class="footer"><div class="footer">TOTAL AMOUNT NEEDED </div>
</th>
<th colspan="2" > <div class="numbers">Amount</div></th>
</tr>
<tr>
<th></th>
<th colspan="2"><div class="certify">I hereby certify that each person whose name appears on this
DATA DATA are entitled to cash assistance</div></th>
<th></th>
<th></th>
<th colspan="6"><div class="certify">I certifiy on my official oath that I have this day ____ of
_______________________ pain in DATA DATAD ATA DATA DATA DATA DATA DATA DAATA,</div></th>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
fas
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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>
javascript
function printDiv() {
// 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);
// 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();
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();
}
Css
#media screen {
.noPrint {}
.titles {
display: none;
}
.footer {
display: none;
}
}
#media print {
.noPrint {
display: none;
}
.title {}
.footer {}
}
In response to your comment, yes, one table has no tfoot and one table only has a tfoot
Like this (also correcting for the missing <):
<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>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
fas
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</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>
<table>
<tfoot>
<tr >
<th ><div class="footer"></div></th>
<th colspan="2"> <div class="footer">TOTAL NO. OF PERSONS </div>
</th>
<th colspan="2" ><div class="numbers">20</div></th>
</tr>
<tr>
<th class="footer"></th>
<th colspan="2" class="footer"><div class="footer">TOTAL AMOUNT NEEDED </div>
</th>
<th colspan="2" > <div class="numbers">Amount</div></th>
</tr>
<tr>
<th></th>
<th colspan="2"><div class="certify">I hereby certify that each person whose name appears on this
DATA DATA are entitled to cash assistance</div></th>
<th></th>
<th></th>
<th colspan="6"><div class="certify">I certifiy on my official oath that I have this day ____ of
_______________________ pain in DATA DATAD ATA DATA DATA DATA DATA DATA DAATA,</div></th>
</tr>
</tfoot>
</table>
Im having problem on how to add text header and footer when I print data table on html. I have already title on header but it seems that the default javascript on my template recognized the <title </title tags in my html. Can anyone suggest or provide solution on this problem? or Thank you in advance
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>
<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>
Without the styling, I can't see if it exactly matches what you are trying to achieve, but you can check the styling later.
The basic structure of the thead tag should be something like:
<thead>
<tr>
<th colspan=9>This should display on print</th>
</tr>
<tr>
<th>ID Number</th>
<th>Name</th>
<th>Barangay</th>
<th>Sex</th>
<th>Sector</th>
<th>Amount</th>
<th>Signature/thumb</th>
<th >ID </th>
<th>Date Received</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=9>Text for the footer goes here</td>
</tr>
</tfoot>
In your table you have 9 columns, so the title th tag needs to span all 9. This is done by adding colspan=9 into the th element itself.
The footer should be added in a similar way. Note that tfoot MUST be entered immediately after thead and BEFORE any tbody tags
(updated to include tfoot)
I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
And my javascript codes
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
} else {
tableRow.style.backgroundColor = 'white';
}
}
</script>
You can select all td of selected row and get the innerHTML of each td.
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can do the same thing with pure CSS.
Below is an example, where I have used hover class for true
tr{
background: grey;
}
tr:hover{
background: white;
}
.hover:hover{
background:#dcfac9;
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1" class="hover"
onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"
onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3" class="hover"
onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.
$('#example tr').click(function() {
var values = $(this).find('td').map(function() {
return $(this).text();
}).get();
console.log(values);
});
table tr:hover {
background-color: #dcfac9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script language="javascript">
function readValues(evt){
var elem = evt.target.parentElement;
console.log(elem); //elem contains current tr element's data
}
var elem = document.querySelectorAll("#example tr");
for(var i=0;i<elem.length;i++){
bindMe(elem[i]);
}
function bindMe(elem){
elem.addEventListener("click", function(evt){
readValues(evt);
});
}
</script>
jsfiddle: https://jsfiddle.net/rxvjmvzh/
I got a table with several trs. I want to select 5 trs in a row and give them a background color, then take the next 5 trs and give them another background color - like even and odd, but with 5 elements as a block.
This is what I have tried
var trs = $('table.small-only tr');
for (var i = 1; i < trs.length; i += 5) {
if (i%2 == 0){
// select even blocks
}else {
// select odd blocks
}
}
This doesn't work though.
How can I select blocks containing 5 trs and give the even and odd blocks different background colors in a proper way?
I found a work around:
for (var i = 1; i < trs.length; i += 5) {
trs.slice(i, i + 5).wrapAll("<div></div>");
}
and
div {
&:nth-of-type(odd) {
background: #f2f2f2 !important;
}
}
But clearly putting divs around trs in a table isn't a good way.
Here is my example:
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var my_table_rows= $('.my-table tr');
var color;
for (var i = 0; i < my_table_rows.length; i++){
if (i % 5 === 0) color = getRandomColor();
my_table_rows.eq(i).css('background', color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
</table>
To achieve this you can loop through the tr elements in the table stepping over the number of rows you want per group. You can then use slice() to retrieve the set number of rows before calling addClass() on them. Try this:
var groupSize = 5;
var classes = ['group1', 'group2'];
var $rows = $("table.small-only tr");
for(var i = 0; i < $rows.length; i += groupSize) {
$rows.slice(i, i + groupSize).addClass(classes[i / groupSize % classes.length]);
}
.group1 { background-color: #C00; }
.group2 { background-color: #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="small-only">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
</table>
but clearly putting divs around trs in a table isnt a good way
No, it is invalid html. However you can use <tbody> instead of <div>
A table can have any number of <tbody> elements
You can do like that way
HTML
<table class="table">
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
Jquery
$(function(){
var limit = 5;
var arr = ['red','green','yellow','blue','orange'];
$('.table tr').each(function(i,e){
var ind = parseInt((i/limit));
$(this).css('background',arr[ind]);
})
})
You can also use CSS selector :nth-child(xn) and :not():
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {background-color:gray}
tr {
background: turquoise;
counter-increment: trs;
}
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {
background: tomato
}
/* check row numbers */
tr:before {
content: counter(trs);
display: table-cell;
padding: 0.25em;
border: solid;
background: yellow;
}
tr:nth-child(odd):before {
background: gray;
}
td {
padding: 0.25em;
border: solid;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I want to interchange columns in two tables.if "a" is selected and dragged all "1" should move automatically.
http://jsfiddle.net/9LGrm/
<table id="a">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<table id="b">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I have tried this plugin:
http://www.danvk.org/wp/dragtable/
https://github.com/jebaird/dragtable
it uses single table I can't change the structure of the table!
Here is the Solution.
The HTML:
<table class="draggable" id="a"><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>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
</tbody><tfoot></tfoot></table>
The CSS:
#a
{
border: 1px black;
}
th{font-weight:normal;}
Hope this helps.