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>
Related
I'd like to have a table with alternating colors of rows but rows with the same value should have unitary background color. Can I achieve such an effect with CSS?
Example:
JQuery
(feel free to simplify and edit this)
$(function() {
let elems = $('tr:not(".head")');
let count = 0;
for (let i=0; i<elems.length; i++) {
let el = $(elems[i]),
prev = $(elems[i-1]);
let isEven = (count % 2 == 0);
if (isEven) {
el.css('background', 'red');
} else {
el.css('background', 'yellow');
}
if (el.text() == prev.text()) {
let clr = prev.css('background');
el.css('background', clr);
} else {
count++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="head">
<th>One</th>
<th>Two</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
</table>
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
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)
So for the below table, I am trying to apply the scroll for the tbody, so that the table header will stick. How can I achieve this? Also when I tried making the display to block for the tbody the alignment is breaking.
Tried with this but the alignment got broke:
tbody{
display: block;
height: 600px;
overflow: auto;
}
What is the best way to achieve this and to implement horizontal scroll if the heading of columns got increased?
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
border: 1px solid #ddd;
padding: 4px;
}
tr:hover {
background-color: #ddd;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: black;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Total Count</th>
<th>Total People</th>
<th>Summary Count</th>
<th>Manual Count</th>
<th>Value on Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
Try this
body{
margin: 0;
}
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
td{
word-break: break-all;
}
td,th {
border: 1px solid #ddd;
padding: 8px;
min-width: 130px;
word-break: break-all;// if text length increases we need to have
}
tr:hover {
background-color: #ddd;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: black;
}
.tbl-cover{
position: relative;
}
.fxd-header {
position: sticky;
top: 0;
left: 0;
right: 0;
background: #fff;
}
<div class="tbl-cover">
<table class="fxd-header">
<thead>
<tr>
<th>Name</th>
<th>Total Count</th>
<th>Total People</th>
<th>Summary Count</th>
<th>Manual Count</th>
<th>Value on Count</th>
</tr>
</thead>
</table>
<div class="tbl-inner">
<table>
<tbody>
<tr>
<td>Test1_test_test_test_test</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table> </div>
</div>
Please view in full size you will get the solution
.fixed_header{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody{
display:block;
width: 100%;
overflow: auto;
height: 100px;
}
.fixed_header thead tr {
display: block;
}
.fixed_header thead {
color:#fff;
}
.fixed_header th, .fixed_header td {
padding: 5px;
text-align: left;
width: 150px;
}
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
border: 1px solid #ddd;
padding: 4px;
}
tr:hover {
background-color: #ddd;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: black;
}
<table class="fixed_header">
<thead>
<tr>
<th>Name</th>
<th>Total Count</th>
<th>Total People</th>
<th>Summary Count</th>
<th>Manual Count</th>
<th>Value on Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</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/