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>
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 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 have multiple table like these 1st table
2nd table
i want to divide these table rows in separate pages. each page contain 15 or 20 rows, after 1st table complete separating then the 2nd table will start.
these code repeat the head text on next page when print i want to remove it.
please help
jQuery(document).ready(function() {
for (i = 0; i < document.getElementsByClassName("testInfoTable").length; i++) {
document.getElementsByClassName("testInfoTable")[i].style.pageBreakBefore = "always";
}
var div_pageBreaker = '<div style="page-break-before:always;"></div>';
var per_page = 15;
$('.testInfoTable').each(function(index, element) {
var pages = Math.ceil($(element).find('tbody tr').length / per_page);
if (pages == 1) {
return;
}
var table_to_split = $(element);
var current_page = 1;
for (current_page = 1; current_page <= pages; current_page++) {
var cloned_table = table_to_split.clone();
$('tbody tr', table_to_split).each(function(loop, row_element) {
if (loop >= per_page) {
$(row_element).remove();
}
});
$('tbody tr', cloned_table).each(function(loop, row_element) {
if (loop < per_page) {
$(row_element).remove();
}
});
if (current_page < pages) {
if (cloned_table.find('tbody tr').length > 0) {
$(element).find(".text").html("What");
$(cloned_table).find("h4").html("What");
$(div_pageBreaker).appendTo($(element));
$(cloned_table).appendTo($(element));
}
}
//make a break
table_to_split = cloned_table;
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<div>
<table class="testInfoTable">
<thead>
<tr><th> Table 1 Head 1</th> </tr>
<tr><th> <div>Table 1 Head 2</div></th> </tr>
<tr><th> <div>Table 1 Head 3</div></th> </tr>
<tr>
<th>
<h4 class="text">Head Text : Table 1</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>1</td> </tr>
<tr><td>3</td> <td>1</td> <td>1</td> </tr>
<tr><td>4</td> <td>1</td> <td>1</td> </tr>
<tr><td>5</td> <td>1</td> <td>1</td> </tr>
<tr><td>6</td> <td>1</td> <td>1</td> </tr>
<tr><td>7</td> <td>1</td> <td>1</td> </tr>
<tr><td>8</td> <td>1</td> <td>1</td> </tr>
<tr><td>9</td> <td>1</td> <td>1</td> </tr>
<tr><td>10</td> <td>1</td> <td>1</td> </tr>
<tr><td>11</td> <td>1</td> <td>1</td> </tr>
<tr><td>12</td> <td>1</td> <td>1</td> </tr>
<tr><td>13</td> <td>1</td> <td>1</td> </tr>
<tr><td>14</td> <td>1</td> <td>1</td> </tr>
<tr><td>15</td> <td>1</td> <td>1</td> </tr>
<tr><td>16</td> <td>1</td> <td>1</td> </tr>
<tr><td>17</td> <td>1</td> <td>1</td> </tr>
<tr><td>18</td> <td>1</td> <td>1</td> </tr>
<tr><td>19</td> <td>1</td> <td>1</td> </tr>
<tr><td>20</td> <td>1</td> <td>1</td> </tr>
<tr><td>21</td> <td>1</td> <td>1</td> </tr>
<tr><td>22</td> <td>1</td> <td>1</td> </tr>
<tr><td>23</td> <td>1</td> <td>1</td> </tr>
<tr><td>24</td> <td>1</td> <td>1</td> </tr>
<tr><td>25</td> <td>1</td> <td>1</td> </tr>
<tr><td>26</td> <td>1</td> <td>1</td> </tr>
<tr><td>27</td> <td>1</td> <td>1</td> </tr>
<tr><td>28</td> <td>1</td> <td>1</td> </tr>
<tr><td>29</td> <td>1</td> <td>1</td> </tr>
<tr><td>30</td> <td>1</td> <td>1</td> </tr>
<tr><td>31</td> <td>1</td> <td>1</td> </tr>
<tr><td>32</td> <td>1</td> <td>1</td> </tr>
</tbody>
</table>
<table class="testInfoTable">
<thead>
<tr><th> Table 2 Head 1</th> </tr>
<tr><th> <div>Table 2 Head 2</div></th> </tr>
<tr><th> <div>Table 2 Head 3</div></th> </tr>
<tr>
<th>
<h4 class="text">Head Text : Table 2</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>1</td> </tr>
<tr><td>3</td> <td>1</td> <td>1</td> </tr>
<tr><td>4</td> <td>1</td> <td>1</td> </tr>
<tr><td>5</td> <td>1</td> <td>1</td> </tr>
<tr><td>6</td> <td>1</td> <td>1</td> </tr>
<tr><td>7</td> <td>1</td> <td>1</td> </tr>
<tr><td>8</td> <td>1</td> <td>1</td> </tr>
<tr><td>9</td> <td>1</td> <td>1</td> </tr>
<tr><td>10</td> <td>1</td> <td>1</td> </tr>
<tr><td>11</td> <td>1</td> <td>1</td> </tr>
<tr><td>12</td> <td>1</td> <td>1</td> </tr>
<tr><td>13</td> <td>1</td> <td>1</td> </tr>
<tr><td>14</td> <td>1</td> <td>1</td> </tr>
<tr><td>15</td> <td>1</td> <td>1</td> </tr>
<tr><td>16</td> <td>1</td> <td>1</td> </tr>
<tr><td>17</td> <td>1</td> <td>1</td> </tr>
<tr><td>18</td> <td>1</td> <td>1</td> </tr>
<tr><td>19</td> <td>1</td> <td>1</td> </tr>
<tr><td>20</td> <td>1</td> <td>1</td> </tr>
<tr><td>21</td> <td>1</td> <td>1</td> </tr>
<tr><td>22</td> <td>1</td> <td>1</td> </tr>
<tr><td>23</td> <td>1</td> <td>1</td> </tr>
<tr><td>24</td> <td>1</td> <td>1</td> </tr>
<tr><td>25</td> <td>1</td> <td>1</td> </tr>
<tr><td>26</td> <td>1</td> <td>1</td> </tr>
<tr><td>27</td> <td>1</td> <td>1</td> </tr>
<tr><td>28</td> <td>1</td> <td>1</td> </tr>
<tr><td>29</td> <td>1</td> <td>1</td> </tr>
<tr><td>30</td> <td>1</td> <td>1</td> </tr>
<tr><td>31</td> <td>1</td> <td>1</td> </tr>
<tr><td>32</td> <td>1</td> <td>1</td> </tr>
</tbody>
</table>
<div id="appendTable"></div>
</div>
</body>
</html>
I believe this modification does what you want.
I changed the code so the cloned tables dont´t stays inside the original tables.
jQuery(document).ready(function () {
var per_page = 15;
$('.testInfoTable').each(function (index, element) {
var pages = Math.ceil($(element).find('tbody tr').length / per_page);
if (pages == 1) {
return;
}
var table_to_split = $(element);
var current_page = 1;
for (current_page = 1; current_page <= pages; current_page++) {
var cloned_table = $('<table><tbody>' + table_to_split.find('tbody').html() + '</tbody></table>');
cloned_table.addClass("testInfoTable cloned")
$('tbody tr', table_to_split).each(function (loop, row_element) {
if (loop >= per_page) {
$(row_element).remove();
}
});
$('tr', cloned_table).each(function (loop, row_element) {
if (loop < per_page) {
$(row_element).remove();
}
});
if (current_page < pages) {
table_to_split.after(cloned_table);
cloned_table.width(table_to_split.width());
}
table_to_split = cloned_table;
}
});
$('<tr><th colspan="3"><h4 class="text">Table Head</h4></th></tr>').prependTo('table.cloned')
});
table.testInfoTable {
page-break-before: always;
width: 200px;
}
table.testInfoTable td, table.testInfoTable th {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="PRINT" onclick="window.print();" />
<table class="testInfoTable">
<thead>
<tr><th colspan="3"> Table 1 Head 1</th> </tr>
<tr><th colspan="3"> <div>Table 1 Head 2</div></th> </tr>
<tr><th colspan="3"> <div>Table 1 Head 3</div></th> </tr>
<tr>
<th colspan="3">
<h4 class="text">Head Text : Table 1</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td><td>1</td></tr>
<tr><td>2</td><td>1</td><td>1</td></tr>
<tr><td>3</td><td>1</td><td>1</td></tr>
<tr><td>4</td><td>1</td><td>1</td></tr>
<tr><td>5</td><td>1</td><td>1</td></tr>
<tr><td>6</td><td>1</td><td>1</td></tr>
<tr><td>7</td><td>1</td><td>1</td></tr>
<tr><td>8</td><td>1</td><td>1</td></tr>
<tr><td>9</td><td>1</td><td>1</td></tr>
<tr><td>10</td><td>1</td><td>1</td></tr>
<tr><td>11</td><td>1</td><td>1</td></tr>
<tr><td>12</td><td>1</td><td>1</td></tr>
<tr><td>13</td><td>1</td><td>1</td></tr>
<tr><td>14</td><td>1</td><td>1</td></tr>
<tr><td>15</td><td>1</td><td>1</td></tr>
<tr><td>16</td><td>1</td><td>1</td></tr>
<tr><td>17</td><td>1</td><td>1</td></tr>
<tr><td>18</td><td>1</td><td>1</td></tr>
<tr><td>19</td><td>1</td><td>1</td></tr>
<tr><td>20</td><td>1</td><td>1</td></tr>
<tr><td>21</td><td>1</td><td>1</td></tr>
<tr><td>22</td><td>1</td><td>1</td></tr>
<tr><td>23</td><td>1</td><td>1</td></tr>
<tr><td>24</td><td>1</td><td>1</td></tr>
<tr><td>25</td><td>1</td><td>1</td></tr>
<tr><td>26</td><td>1</td><td>1</td></tr>
<tr><td>27</td><td>1</td><td>1</td></tr>
<tr><td>28</td><td>1</td><td>1</td></tr>
<tr><td>29</td><td>1</td><td>1</td></tr>
<tr><td>30</td><td>1</td><td>1</td></tr>
<tr><td>31</td><td>1</td><td>1</td></tr>
<tr><td>32</td><td>1</td><td>1</td></tr>
</tbody>
</table>
<table class="testInfoTable">
<thead>
<tr><th colspan="3"> Table 2 Head 1</th> </tr>
<tr><th colspan="3"> <div>Table 2 Head 2</div></th> </tr>
<tr><th colspan="3"> <div>Table 2 Head 3</div></th> </tr>
<tr>
<th colspan="3">
<h4 class="text">Head Text : Table 2</h4>
</th>
</tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td><td>1</td></tr>
<tr><td>2</td><td>1</td><td>1</td></tr>
<tr><td>3</td><td>1</td><td>1</td></tr>
<tr><td>4</td><td>1</td><td>1</td></tr>
<tr><td>5</td><td>1</td><td>1</td></tr>
<tr><td>6</td><td>1</td><td>1</td></tr>
<tr><td>7</td><td>1</td><td>1</td></tr>
<tr><td>8</td><td>1</td><td>1</td></tr>
<tr><td>9</td><td>1</td><td>1</td></tr>
<tr><td>10</td><td>1</td><td>1</td></tr>
<tr><td>11</td><td>1</td><td>1</td></tr>
<tr><td>12</td><td>1</td><td>1</td></tr>
<tr><td>13</td><td>1</td><td>1</td></tr>
<tr><td>14</td><td>1</td><td>1</td></tr>
<tr><td>15</td><td>1</td><td>1</td></tr>
<tr><td>16</td><td>1</td><td>1</td></tr>
<tr><td>17</td><td>1</td><td>1</td></tr>
<tr><td>18</td><td>1</td><td>1</td></tr>
<tr><td>19</td><td>1</td><td>1</td></tr>
<tr><td>20</td><td>1</td><td>1</td></tr>
<tr><td>21</td><td>1</td><td>1</td></tr>
<tr><td>22</td><td>1</td><td>1</td></tr>
<tr><td>23</td><td>1</td><td>1</td></tr>
<tr><td>24</td><td>1</td><td>1</td></tr>
<tr><td>25</td><td>1</td><td>1</td></tr>
<tr><td>26</td><td>1</td><td>1</td></tr>
<tr><td>27</td><td>1</td><td>1</td></tr>
<tr><td>28</td><td>1</td><td>1</td></tr>
<tr><td>29</td><td>1</td><td>1</td></tr>
<tr><td>30</td><td>1</td><td>1</td></tr>
<tr><td>31</td><td>1</td><td>1</td></tr>
<tr><td>32</td><td>1</td><td>1</td></tr>
</tbody>
</table>
I got a table with several trs. I want to select 5 trs in a row and give them a background color, then take the next 5 trs and give them another background color - like even and odd, but with 5 elements as a block.
This is what I have tried
var trs = $('table.small-only tr');
for (var i = 1; i < trs.length; i += 5) {
if (i%2 == 0){
// select even blocks
}else {
// select odd blocks
}
}
This doesn't work though.
How can I select blocks containing 5 trs and give the even and odd blocks different background colors in a proper way?
I found a work around:
for (var i = 1; i < trs.length; i += 5) {
trs.slice(i, i + 5).wrapAll("<div></div>");
}
and
div {
&:nth-of-type(odd) {
background: #f2f2f2 !important;
}
}
But clearly putting divs around trs in a table isn't a good way.
Here is my example:
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var my_table_rows= $('.my-table tr');
var color;
for (var i = 0; i < my_table_rows.length; i++){
if (i % 5 === 0) color = getRandomColor();
my_table_rows.eq(i).css('background', color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
</table>
To achieve this you can loop through the tr elements in the table stepping over the number of rows you want per group. You can then use slice() to retrieve the set number of rows before calling addClass() on them. Try this:
var groupSize = 5;
var classes = ['group1', 'group2'];
var $rows = $("table.small-only tr");
for(var i = 0; i < $rows.length; i += groupSize) {
$rows.slice(i, i + groupSize).addClass(classes[i / groupSize % classes.length]);
}
.group1 { background-color: #C00; }
.group2 { background-color: #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="small-only">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
</table>
but clearly putting divs around trs in a table isnt a good way
No, it is invalid html. However you can use <tbody> instead of <div>
A table can have any number of <tbody> elements
You can do like that way
HTML
<table class="table">
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
Jquery
$(function(){
var limit = 5;
var arr = ['red','green','yellow','blue','orange'];
$('.table tr').each(function(i,e){
var ind = parseInt((i/limit));
$(this).css('background',arr[ind]);
})
})
You can also use CSS selector :nth-child(xn) and :not():
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {background-color:gray}
tr {
background: turquoise;
counter-increment: trs;
}
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {
background: tomato
}
/* check row numbers */
tr:before {
content: counter(trs);
display: table-cell;
padding: 0.25em;
border: solid;
background: yellow;
}
tr:nth-child(odd):before {
background: gray;
}
td {
padding: 0.25em;
border: solid;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I want to interchange columns in two tables.if "a" is selected and dragged all "1" should move automatically.
http://jsfiddle.net/9LGrm/
<table id="a">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
<table id="b">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I have tried this plugin:
http://www.danvk.org/wp/dragtable/
https://github.com/jebaird/dragtable
it uses single table I can't change the structure of the table!
Here is the Solution.
The HTML:
<table class="draggable" id="a"><thead><tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr></thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td>
</tr>
</tbody><tfoot></tfoot></table>
The CSS:
#a
{
border: 1px black;
}
th{font-weight:normal;}
Hope this helps.