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)
Related
I have a table where I can hide results by category using checkboxes. I'm trying to think of how I can hide additional results (e.g. only show the top 10, 15, 25... per category) using a dropdown menu and a slice function, but it's not clear to me how I should go about this they way the code is currently set up. The goal is to show only the top n results per selected cluster. Any help would be greatly appreciated.
Here is my code:
// Select cluster
$(document).ready(function() {
$('input[type="checkbox"]').change(function() {
var inputValue = $(this).attr("value");
var checked = $(this)[0].checked;
$("tr").each(function() {
if($(this).find("td:eq(0)").html() === inputValue.toString()) {
if(checked) {
$(this).show(); // slice by n numbers here
} else {
$(this).hide();
}
}
});
});
});
function checkedAll() {
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for(var i = elements.length; i--;) {
if(elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
$(elements[i]).trigger("change");
}
}
}
// Select n genes per cluster
$('#dropdown').change(function() {
var number = $(this).find('option:selected').attr('data-number');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>
Show/hide clusters
</p>
<div id="filter">
<form action="" method="post" name="frm1" id="frm1">
<table>
<tr>
<input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll.call(this);" checked/> select all
</tr>
<tr>
<td><input value=0 type="checkbox" name="cluster_ids" checked/> 0</td>
</tr>
<tr>
<td><input value=1 type="checkbox" name="cluster_ids" checked/> 1</td>
</tr>
<tr>
<td><input value=2 type="checkbox" name="cluster_ids" checked/> 2</td>
</tr>
<tr>
<td><input value=3 type="checkbox" name="cluster_ids" checked/> 3</td>
</tr>
<tr>
<td><input value=4 type="checkbox" name="cluster_ids" checked/> 4</td>
</tr>
</table>
</form>
</div>
<br>
<p>
Show n genes per cluster
</p>
<div>
<select id="dropdown">
<option value="">select one</option>
<option value=5>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=25>25</option>
</select>
</div>
<br>
<table border="1" class="table">
<thead>
<tr style="text-align: right;">
<th style="min-width: 1px;">Leiden</th>
<th style="min-width: 1px;">gene_name</th>
<th style="min-width: 1px;">Z_score</th>
<th style="min-width: 1px;">pval_adj</th>
<th style="min-width: 1px;">log_FC</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>mt-Rnr1_mm10</td>
<td>19.3</td>
<td>6.5e-29</td>
<td>744.2</td>
</tr>
<tr>
<td>0</td>
<td>mt-Rnr2_mm10</td>
<td>18.9</td>
<td>1.0e-28</td>
<td>594.3</td>
</tr>
<tr>
<td>0</td>
<td>Nedd4_mm10</td>
<td>18.8</td>
<td>1.0e-28</td>
<td>26.9</td>
</tr>
<tr>
<td>0</td>
<td>Col1a2_mm10</td>
<td>18.1</td>
<td>1.0e-27</td>
<td>49.6</td>
</tr>
<tr>
<td>0</td>
<td>Itgb1_mm10</td>
<td>17.2</td>
<td>1.3e-26</td>
<td>15.4</td>
</tr>
<tr>
<td>0</td>
<td>Hsp90b1_mm10</td>
<td>17.2</td>
<td>1.3e-26</td>
<td>26.4</td>
</tr>
<tr>
<td>0</td>
<td>Srrm2_mm10</td>
<td>17.1</td>
<td>1.7e-26</td>
<td>29.8</td>
</tr>
<tr>
<td>0</td>
<td>Canx_mm10</td>
<td>16.9</td>
<td>3.3e-26</td>
<td>17.1</td>
</tr>
<tr>
<td>0</td>
<td>Prrc2c_mm10</td>
<td>16.8</td>
<td>3.4e-26</td>
<td>19.2</td>
</tr>
<tr>
<td>0</td>
<td>Ccdc88a_mm10</td>
<td>16.7</td>
<td>3.6e-26</td>
<td>11.1</td>
</tr>
<tr>
<td>0</td>
<td>Rbfox2_mm10</td>
<td>16.6</td>
<td>5.2e-26</td>
<td>20.0</td>
</tr>
<tr>
<td>0</td>
<td>mt-Cytb_mm10</td>
<td>16.5</td>
<td>5.9e-26</td>
<td>17.1</td>
</tr>
<tr>
<td>0</td>
<td>Nipbl_mm10</td>
<td>16.5</td>
<td>6.9e-26</td>
<td>14.8</td>
</tr>
<tr>
<td>0</td>
<td>Birc6_mm10</td>
<td>16.5</td>
<td>5.2e-26</td>
<td>17.6</td>
</tr>
<tr>
<td>0</td>
<td>Ddx5_mm10</td>
<td>16.5</td>
<td>6.9e-26</td>
<td>14.2</td>
</tr>
<tr>
<td>0</td>
<td>Rbm25_mm10</td>
<td>16.5</td>
<td>6.9e-26</td>
<td>19.4</td>
</tr>
<tr>
<td>0</td>
<td>Dst_mm10</td>
<td>16.3</td>
<td>1.1e-25</td>
<td>20.6</td>
</tr>
<tr>
<td>0</td>
<td>Eif3a_mm10</td>
<td>16.3</td>
<td>1.3e-25</td>
<td>17.1</td>
</tr>
<tr>
<td>0</td>
<td>Igf1r_mm10</td>
<td>16.3</td>
<td>1.1e-25</td>
<td>21.3</td>
</tr>
<tr>
<td>0</td>
<td>Asap1_mm10</td>
<td>16.2</td>
<td>1.4e-25</td>
<td>28.5</td>
</tr>
<tr>
<td>0</td>
<td>Lpp_mm10</td>
<td>16.1</td>
<td>1.4e-25</td>
<td>44.9</td>
</tr>
<tr>
<td>0</td>
<td>Ubr5_mm10</td>
<td>16.0</td>
<td>2.8e-25</td>
<td>14.0</td>
</tr>
<tr>
<td>0</td>
<td>Ahnak_mm10</td>
<td>16.0</td>
<td>3.4e-25</td>
<td>41.4</td>
</tr>
<tr>
<td>0</td>
<td>Fubp1_mm10</td>
<td>16.0</td>
<td>2.6e-25</td>
<td>13.1</td>
</tr>
<tr>
<td>0</td>
<td>Sf3b1_mm10</td>
<td>15.9</td>
<td>2.2e-25</td>
<td>8.6</td>
</tr>
<tr>
<td>1</td>
<td>NUB1_hg38</td>
<td>8.9</td>
<td>9.5e-11</td>
<td>3.7</td>
</tr>
<tr>
<td>1</td>
<td>PKM_hg38</td>
<td>8.8</td>
<td>1.4e-10</td>
<td>5.1</td>
</tr>
<tr>
<td>1</td>
<td>HSP90B1_hg38</td>
<td>8.7</td>
<td>1.9e-10</td>
<td>13.3</td>
</tr>
<tr>
<td>1</td>
<td>TIAM1_hg38</td>
<td>8.4</td>
<td>1.5e-10</td>
<td>6.8</td>
</tr>
<tr>
<td>1</td>
<td>PNN_hg38</td>
<td>8.4</td>
<td>5.6e-10</td>
<td>8.6</td>
</tr>
<tr>
<td>1</td>
<td>CHD4_hg38</td>
<td>8.3</td>
<td>1.4e-09</td>
<td>6.5</td>
</tr>
<tr>
<td>1</td>
<td>NOP58_hg38</td>
<td>8.3</td>
<td>7.9e-10</td>
<td>6.6</td>
</tr>
<tr>
<td>1</td>
<td>AGAP1_hg38</td>
<td>8.1</td>
<td>1.6e-09</td>
<td>17.2</td>
</tr>
<tr>
<td>1</td>
<td>MT-CO1_hg38</td>
<td>8.1</td>
<td>1.1e-09</td>
<td>56.8</td>
</tr>
<tr>
<td>1</td>
<td>GPHN_hg38</td>
<td>8.1</td>
<td>1.3e-09</td>
<td>16.3</td>
</tr>
<tr>
<td>1</td>
<td>PSIP1_hg38</td>
<td>8.1</td>
<td>1.4e-09</td>
<td>6.2</td>
</tr>
<tr>
<td>1</td>
<td>EIF2S3_hg38</td>
<td>8.1</td>
<td>1.1e-09</td>
<td>5.8</td>
</tr>
<tr>
<td>1</td>
<td>ANKRD36C_hg38</td>
<td>8.1</td>
<td>7.2e-10</td>
<td>5.4</td>
</tr>
<tr>
<td>1</td>
<td>RBM41_hg38</td>
<td>8.1</td>
<td>1.3e-09</td>
<td>6.0</td>
</tr>
<tr>
<td>1</td>
<td>DOCK4_hg38</td>
<td>8.1</td>
<td>8.1e-10</td>
<td>7.3</td>
</tr>
<tr>
<td>1</td>
<td>FKBP10_hg38</td>
<td>8.0</td>
<td>2.2e-09</td>
<td>5.9</td>
</tr>
<tr>
<td>1</td>
<td>KNTC1_hg38</td>
<td>8.0</td>
<td>1.1e-09</td>
<td>5.6</td>
</tr>
<tr>
<td>1</td>
<td>NUP133_hg38</td>
<td>8.0</td>
<td>1.9e-09</td>
<td>4.8</td>
</tr>
<tr>
<td>1</td>
<td>CLASP1_hg38</td>
<td>8.0</td>
<td>2.4e-09</td>
<td>8.1</td>
</tr>
<tr>
<td>1</td>
<td>CSNK1A1_hg38</td>
<td>7.9</td>
<td>2.3e-09</td>
<td>6.4</td>
</tr>
<tr>
<td>1</td>
<td>BCLAF1_hg38</td>
<td>7.9</td>
<td>1.6e-09</td>
<td>6.8</td>
</tr>
<tr>
<td>1</td>
<td>JPX_hg38</td>
<td>7.9</td>
<td>1.7e-09</td>
<td>14.5</td>
</tr>
<tr>
<td>1</td>
<td>ZNF292_hg38</td>
<td>7.9</td>
<td>9.9e-10</td>
<td>5.3</td>
</tr>
<tr>
<td>1</td>
<td>SLC6A15_hg38</td>
<td>7.9</td>
<td>4.4e-09</td>
<td>5.1</td>
</tr>
<tr>
<td>1</td>
<td>ATRX_hg38</td>
<td>7.9</td>
<td>8.9e-10</td>
<td>8.3</td>
</tr>
<tr>
<td>2</td>
<td>FIRRE_hg38</td>
<td>5.4</td>
<td>1.5e-05</td>
<td>10.0</td>
</tr>
<tr>
<td>2</td>
<td>CDK14_hg38</td>
<td>5.3</td>
<td>1.2e-05</td>
<td>4.5</td>
</tr>
<tr>
<td>2</td>
<td>E2F3_hg38</td>
<td>5.3</td>
<td>1.1e-05</td>
<td>6.1</td>
</tr>
<tr>
<td>2</td>
<td>STK3_hg38</td>
<td>5.2</td>
<td>1.1e-05</td>
<td>4.2</td>
</tr>
<tr>
<td>2</td>
<td>TTC17_hg38</td>
<td>5.1</td>
<td>2.7e-05</td>
<td>5.4</td>
</tr>
<tr>
<td>2</td>
<td>TAS2R14_hg38</td>
<td>5.1</td>
<td>2.3e-05</td>
<td>8.5</td>
</tr>
<tr>
<td>2</td>
<td>KATNBL1_hg38</td>
<td>5.1</td>
<td>3.8e-05</td>
<td>2.8</td>
</tr>
<tr>
<td>2</td>
<td>TBCK_hg38</td>
<td>5.1</td>
<td>2.7e-05</td>
<td>4.2</td>
</tr>
<tr>
<td>2</td>
<td>JMJD1C_hg38</td>
<td>5.1</td>
<td>2.9e-05</td>
<td>5.5</td>
</tr>
<tr>
<td>2</td>
<td>ARID1B_hg38</td>
<td>5.1</td>
<td>3.1e-05</td>
<td>10.0</td>
</tr>
<tr>
<td>2</td>
<td>SLC2A13_hg38</td>
<td>5.1</td>
<td>4.1e-05</td>
<td>4.8</td>
</tr>
<tr>
<td>2</td>
<td>NSMCE2_hg38</td>
<td>5.0</td>
<td>2.5e-05</td>
<td>5.6</td>
</tr>
<tr>
<td>2</td>
<td>SIMC1_hg38</td>
<td>5.0</td>
<td>3.0e-05</td>
<td>3.4</td>
</tr>
<tr>
<td>2</td>
<td>MON2_hg38</td>
<td>5.0</td>
<td>4.4e-05</td>
<td>4.3</td>
</tr>
<tr>
<td>2</td>
<td>TULP4_hg38</td>
<td>4.9</td>
<td>4.9e-05</td>
<td>5.5</td>
</tr>
<tr>
<td>2</td>
<td>ANKRD36C_hg38</td>
<td>4.9</td>
<td>4.2e-05</td>
<td>3.4</td>
</tr>
<tr>
<td>2</td>
<td>TTLL5_hg38</td>
<td>4.9</td>
<td>4.6e-05</td>
<td>3.5</td>
</tr>
<tr>
<td>2</td>
<td>TBC1D32_hg38</td>
<td>4.9</td>
<td>6.2e-05</td>
<td>6.4</td>
</tr>
<tr>
<td>2</td>
<td>ANKRD36B_hg38</td>
<td>4.9</td>
<td>5.8e-05</td>
<td>2.6</td>
</tr>
<tr>
<td>2</td>
<td>KCNQ1OT1_hg38</td>
<td>4.9</td>
<td>4.0e-05</td>
<td>5.2</td>
</tr>
<tr>
<td>2</td>
<td>RERE_hg38</td>
<td>4.9</td>
<td>4.6e-05</td>
<td>6.3</td>
</tr>
<tr>
<td>2</td>
<td>USP34_hg38</td>
<td>4.8</td>
<td>5.5e-05</td>
<td>6.0</td>
</tr>
<tr>
<td>2</td>
<td>CDKAL1_hg38</td>
<td>4.8</td>
<td>7.4e-05</td>
<td>6.7</td>
</tr>
<tr>
<td>2</td>
<td>COA1_hg38</td>
<td>4.8</td>
<td>6.1e-05</td>
<td>4.4</td>
</tr>
<tr>
<td>2</td>
<td>SLC30A9_hg38</td>
<td>4.8</td>
<td>7.0e-05</td>
<td>3.8</td>
</tr>
<tr>
<td>3</td>
<td>PABPC1_hg38</td>
<td>3.7</td>
<td>3.3e-03</td>
<td>3.9</td>
</tr>
<tr>
<td>3</td>
<td>TBK1_hg38</td>
<td>3.5</td>
<td>7.2e-03</td>
<td>2.3</td>
</tr>
<tr>
<td>3</td>
<td>CHM_hg38</td>
<td>3.4</td>
<td>7.1e-03</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>WIPI2_hg38</td>
<td>3.3</td>
<td>1.1e-02</td>
<td>2.5</td>
</tr>
<tr>
<td>3</td>
<td>MTF2_hg38</td>
<td>3.3</td>
<td>1.0e-02</td>
<td>2.6</td>
</tr>
<tr>
<td>3</td>
<td>CLTC_hg38</td>
<td>3.2</td>
<td>1.2e-02</td>
<td>2.9</td>
</tr>
<tr>
<td>3</td>
<td>FADS1_hg38</td>
<td>3.2</td>
<td>1.2e-02</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>HSP90AA1_hg38</td>
<td>3.1</td>
<td>1.3e-02</td>
<td>9.6</td>
</tr>
<tr>
<td>3</td>
<td>CDC5L_hg38</td>
<td>3.1</td>
<td>1.3e-02</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>EIF2AK1_hg38</td>
<td>3.0</td>
<td>1.5e-02</td>
<td>1.5</td>
</tr>
<tr>
<td>3</td>
<td>CLSPN_hg38</td>
<td>3.0</td>
<td>1.9e-02</td>
<td>2.3</td>
</tr>
<tr>
<td>3</td>
<td>RSL1D1_hg38</td>
<td>2.9</td>
<td>2.0e-02</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>ZFP36L1_hg38</td>
<td>2.9</td>
<td>2.2e-02</td>
<td>2.6</td>
</tr>
<tr>
<td>3</td>
<td>DIAPH1_hg38</td>
<td>2.9</td>
<td>1.9e-02</td>
<td>2.1</td>
</tr>
<tr>
<td>3</td>
<td>SLC5A3_hg38</td>
<td>2.9</td>
<td>2.0e-02</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>HECTD1_hg38</td>
<td>2.9</td>
<td>2.1e-02</td>
<td>2.0</td>
</tr>
<tr>
<td>3</td>
<td>PA2G4_hg38</td>
<td>2.9</td>
<td>2.2e-02</td>
<td>1.9</td>
</tr>
<tr>
<td>3</td>
<td>ANP32B_hg38</td>
<td>2.9</td>
<td>2.4e-02</td>
<td>2.6</td>
</tr>
<tr>
<td>3</td>
<td>CEP57_hg38</td>
<td>2.9</td>
<td>2.6e-02</td>
<td>2.5</td>
</tr>
<tr>
<td>3</td>
<td>PIGH_hg38</td>
<td>2.8</td>
<td>2.8e-02</td>
<td>3.3</td>
</tr>
<tr>
<td>3</td>
<td>PHF20_hg38</td>
<td>2.8</td>
<td>2.6e-02</td>
<td>1.7</td>
</tr>
<tr>
<td>3</td>
<td>SF3B4_hg38</td>
<td>2.8</td>
<td>2.9e-02</td>
<td>2.2</td>
</tr>
<tr>
<td>3</td>
<td>EDEM2_hg38</td>
<td>2.7</td>
<td>3.2e-02</td>
<td>2.0</td>
</tr>
<tr>
<td>3</td>
<td>TAF2_hg38</td>
<td>2.7</td>
<td>2.6e-02</td>
<td>1.3</td>
</tr>
<tr>
<td>3</td>
<td>RPL7A_hg38</td>
<td>2.7</td>
<td>3.3e-02</td>
<td>2.0</td>
</tr>
<tr>
<td>4</td>
<td>APPBP2_hg38</td>
<td>5.7</td>
<td>2.4e-04</td>
<td>3.4</td>
</tr>
<tr>
<td>4</td>
<td>CEP44_hg38</td>
<td>5.6</td>
<td>2.2e-04</td>
<td>3.3</td>
</tr>
<tr>
<td>4</td>
<td>R3HDM1_hg38</td>
<td>5.5</td>
<td>9.5e-05</td>
<td>5.5</td>
</tr>
<tr>
<td>4</td>
<td>CNBP_hg38</td>
<td>5.3</td>
<td>3.5e-04</td>
<td>2.9</td>
</tr>
<tr>
<td>4</td>
<td>GXYLT1_hg38</td>
<td>5.3</td>
<td>2.3e-04</td>
<td>2.5</td>
</tr>
<tr>
<td>4</td>
<td>RPL35A_hg38</td>
<td>5.0</td>
<td>8.6e-04</td>
<td>4.3</td>
</tr>
<tr>
<td>4</td>
<td>CCDC186_hg38</td>
<td>5.0</td>
<td>5.9e-04</td>
<td>2.7</td>
</tr>
<tr>
<td>4</td>
<td>TCF20_hg38</td>
<td>4.9</td>
<td>2.7e-04</td>
<td>3.0</td>
</tr>
<tr>
<td>4</td>
<td>TNRC6B_hg38</td>
<td>4.9</td>
<td>4.8e-04</td>
<td>6.1</td>
</tr>
<tr>
<td>4</td>
<td>DEK_hg38</td>
<td>4.7</td>
<td>4.6e-04</td>
<td>4.0</td>
</tr>
<tr>
<td>4</td>
<td>PRKRIP1_hg38</td>
<td>4.5</td>
<td>1.2e-03</td>
<td>2.6</td>
</tr>
<tr>
<td>4</td>
<td>NELFCD_hg38</td>
<td>4.4</td>
<td>2.1e-03</td>
<td>2.5</td>
</tr>
<tr>
<td>4</td>
<td>ILF3_hg38</td>
<td>4.4</td>
<td>1.6e-03</td>
<td>5.0</td>
</tr>
<tr>
<td>4</td>
<td>LRCH3_hg38</td>
<td>4.3</td>
<td>2.2e-03</td>
<td>3.3</td>
</tr>
<tr>
<td>4</td>
<td>AFDN_hg38</td>
<td>4.3</td>
<td>1.4e-03</td>
<td>5.3</td>
</tr>
<tr>
<td>4</td>
<td>SUCLG1_hg38</td>
<td>4.3</td>
<td>2.6e-03</td>
<td>2.4</td>
</tr>
<tr>
<td>4</td>
<td>NEK9_hg38</td>
<td>4.2</td>
<td>2.6e-03</td>
<td>2.8</td>
</tr>
<tr>
<td>4</td>
<td>LMBRD1_hg38</td>
<td>4.2</td>
<td>2.1e-03</td>
<td>1.9</td>
</tr>
<tr>
<td>4</td>
<td>HPS4_hg38</td>
<td>4.2</td>
<td>3.1e-03</td>
<td>3.6</td>
</tr>
<tr>
<td>4</td>
<td>RUFY1_hg38</td>
<td>4.2</td>
<td>3.0e-03</td>
<td>2.9</td>
</tr>
<tr>
<td>4</td>
<td>MYO1E_hg38</td>
<td>4.2</td>
<td>2.0e-03</td>
<td>2.2</td>
</tr>
<tr>
<td>4</td>
<td>HECTD1_hg38</td>
<td>4.2</td>
<td>3.0e-03</td>
<td>3.5</td>
</tr>
<tr>
<td>4</td>
<td>IGF2BP1_hg38</td>
<td>4.1</td>
<td>2.6e-03</td>
<td>3.5</td>
</tr>
<tr>
<td>4</td>
<td>ENSA_hg38</td>
<td>4.1</td>
<td>3.2e-03</td>
<td>2.9</td>
</tr>
<tr>
<td>4</td>
<td>SPECC1L_hg38</td>
<td>4.0</td>
<td>3.4e-03</td>
<td>4.8</td>
</tr>
</tbody>
</table>
You can take advantage of jQuery's has() and .filter() to find the <tr>s whose first <td> contains a given number, .slice() that array to get the ones after a given index, and .hide() them. (See https://stackoverflow.com/a/13528895/378779.)
It would be easiest to create a single function (I've named it doUpdate()) which does all the showing/hiding. That way you can call it whenever any of the checkboxes are checked or if the dropdown changes.
let doUpdate = function() {
// Loop through all the checkboxes:
$('table.table tr').show();
$('#frm1 tr:not(:first-child) input').each( function(){
if ( $(this).is(':checked') ) {
// Show appropriate slice of this section:
$('table.table tr')
.has('td:nth-child(1):contains(' + $(this).val().toString() + ')')
.slice($('#dropdown option:selected').val()).hide();
} else {
// Hide all rows in this section:
$('table.table tr')
.has('td:nth-child(1):contains(' + $(this).val().toString() + ')')
.hide();
}
})
}
$(document).ready(function() {
// Set up event handlers:
$('input[type="checkbox"]').change(function() {
doUpdate();
});
// Select n genes per cluster
$('#dropdown').change(function() {
doUpdate();
});
doUpdate(); // Run on load to show/hide according to initial checkbox and dropdown state
});
function checkedAll(e) {
// iterate and change status
// Iterate through the 0-4 checkboxes and set their "checked" state according to how "this" is checked:
$('#frm1 tr:not(:first-child) input').each(
function(){
$(this).prop('checked', e.checked )
}
)
doUpdate();
}
This also required a minor modification to your "select all" checkbox:
<input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll(this)" checked/> select all
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>
enter image description here
If there is a change in the number in the column, its colour should get change as well.
There are 7 columns.
Compare 1st column with the second. If the numbers are changed, its colour should get change.
Example in first row "134", "139" then "139" value colour should get change.
In second row "4" "4" is repeated, then its colour should not get change.
<table style="width:80%" id="customers" align="center">
<tr>
<th style="background-color:white;" colspan="2"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Here" title="Type in a name"></th>
<th colspan="7"> asfdasdf</th>
</tr>
<tr>
<th colspan="2"><select class="ui dropdown" id="myselection">
<option value="One">Readvon</option>
<option value="Two">sdctry</option>
<option value="Three">scv</option>
<option value="four">sdv</option>
</select></th>
<th>Nov_2013</th>
<th>March_2014</th>
<th>Dec_2015</th>
<th>Nov_2017</th>
<th>April_2018</th>
<th>Feb_2019</th>
<th>April_2019</th>
</tr>
</table>
<div id="showOne">
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</div>
</table>
You have to do something like below. Read about HTMLTableElement. You have to access rows first and then columns. Compare text in each column...
var table = document.getElementsByTagName('table');
var rows = table[0].rows
var rowsLength = rows.length;
var columns;
var columnsLength;
for (var i = 0; i < rowsLength; i++) {
columns = rows[i].cells;
columnsLength = columns.length;
// We don't need first column, as it contains the text
for (var j = 1; j < columnsLength - 1; j++) {
if (parseInt(columns[j].innerText) != parseInt(columns[j + 1].innerText)) {
columns[j + 1].style.color = 'green';
}
}
}
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
</tr>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
</tr>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
</tr>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
</tr>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>
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/
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>