I am trying to change css style for the first visible row on a table using jQuery and css rules.
When i change the offset i would like to show first visible table TBODY row in red using my css rule.
this is my code example :
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
Thanks for your help.
Through Pure css it's not possible:- Targeting first visible element with pure CSS
But through jQuery you can do like below:-
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
$(".is-visible:first").css({"background-color":"red"});
$(".is-visible").not(":first").css({"background-color":"#ffffff"});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You have to do using jQuery. Try below code.
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
$(".is-visible").css({"background-color":"white"});
$("#row-"+offset).css({"background-color":"red"});
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You can see: https://jsfiddle.net/dkhny7t9/3/
Related
I have been trying to create a sticky table header with out table header with only the first tr will have the sticky head , can any one help with only CSS?
Please use this fiddle to fix , not the below table
https://jsfiddle.net/x243jqbg/
<table class="table">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
<td>row 3</td>
<td>row 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>
</table>
Like Below https://codepen.io/chriscoyier/pen/PrJdxb
You can use tr:first-child selector to target the first row. And then style it accordingly.
.table {
position: relative;
}
tr:first-child td {
top: 0;
position: sticky;
background: lightblue;
}
<table class="table">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
<td>row 3</td>
<td>row 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>
</tbody>
</table>
Set your table as position: relative
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
Then set the first row as position: sticky
tr:first-child td {
background: white;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
Check out my codepen: https://codepen.io/kenneth-bolico/pen/QWLoNry
I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});
In the below code, the first td has rowspan applied making the rest of the cells in that columns shift to the right. Here I want the cells in that column to hide instead of shifting, except the first cell which has rowspan. How do I do that in jQuery or CSS.
So, I want all the cells having 1 to be hidden except the one which was spanned.
Any suggestions would be helpful.
Fiddle: http://jsfiddle.net/a191jffw/28/
th, td{
width:70px;
}
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">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>
</tbody>
</table>
</div>
This might be what your looking for.
$("table tr td[rowspan]").each(function() {
var i = $("table tr td").index($(this))
$("table tbody tr").each(function(_, x) {
$(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
});
})
Demo
$("table tr td[rowspan]").each(function() {
var i = $("table tr td").index($(this))
$("table tbody tr").each(function(_, x) {
$(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
});
})
th, td{
width:70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">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>
</tbody>
</table>
</div>
Try this using jquery and css 'visibilty'.
$('table td').each( function(){
if ( !$(this).attr('rowspan') ) {
$(this).css({
'visibility' : 'hidden'
});
}
});
I perfer css to javascript, for those users which might be anti-javascript. With that said I'm throwing my solution out there.
tr > td:nth-child(1){
display:none;
}
tr:first-child > td:first-child{
display:table-cell;
}
I hope this help you.
$('#result td').each(function() {
if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
$(this).hide();
}
});
$('#result td').each(function() {
if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">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>
</tbody>
</table>
</div>
I have tried to provide a solution with pure javascript. This should also work even if you change rowspan value.
(function(){
window.addEventListener('load',function(){
var td=document.querySelector('#result td[rowspan]');
var n=Number(td.getAttribute('rowspan'));
var tr=td.parentElement;
for(var i=0;i<n-1;i++){
tr=tr.nextElementSibling;
tr.firstElementChild.style.display="none";
}
});
})()
(function(){
window.addEventListener('load',function(){
var td=document.querySelector('#result td[rowspan]');
var n=Number(td.getAttribute('rowspan'));
var tr=td.parentElement;
for(var i=0;i<n-1;i++){
tr=tr.nextElementSibling;
tr.firstElementChild.style.display="none";
}
});
})()
th, td{
width:70px;
}
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">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>
</tbody>
</table>
</div>
i have multiple table like these enter image description here enter image description here 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 printing 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.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<body>
<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>
Check this i add a code to delete the header of the cloned table:-
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();
//cloned_table.find('thead').remove();
$('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");
//Edit?????????
table_to_split.after(div_pageBreaker, cloned_table);
}
}
//make a break
table_to_split = cloned_table;
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<body>
<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>
</body>
</html>
Hope this solve your Issue
Here is a full Demo
I need to select an element <th>A</th> in a table whose path is *[#id="something"]/table/thead/tr/th[2] and change its width.
(function ITPscript() {
$(document).ready(function() {
$("#something table thead tr:nth-child(2)").width(1000);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something" class="aaa">
<table class="sortable">
<thead>
<tr>
<th>0</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th>L</th>
<th>M</th>
<th>N</th>
<th>O</th>
</tr>
</thead>
<tbody id="aBody">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
I'm using $("#something table thead tr:nth-child(2)").width(140); but its not working. Need a proper way to select the element.
:nth-child does not select the nth child of the element, it selects the element which is the nth child of its parent. The selector needs to be ... tr th:nth-child(2):
(function ITPscript() {
$(document).ready(function() {
$("#something table thead tr th:nth-child(2)").width(1000);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something" class="aaa">
<table class="sortable">
<thead>
<tr>
<th>0</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th>L</th>
<th>M</th>
<th>N</th>
<th>O</th>
</tr>
</thead>
<tbody id="aBody">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>