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>
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();
});
});
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/
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 have a page that uses transform to slide the content when navigating. Some of the content has jQuery sortable table rows. At first, the sorting works as expected. But after clicking a nav item (thus applying a transform and sliding to the desired content), sorting does not act as expected. Instead, when you click on the row to be dragged, it drops below the cursor making it hard to sort. See the CodePen below as an example. Try dragging a row before clicking on the nav, then see the difference after clicking the nav.
Is there a way around this (I have no idea where to start)? Or do I need to find a different way sliding my content?
https://codepen.io/thespareroomstudio/pres/XjrEyg
<nav>
<ul>
<li id='goto_slide-1' class='slideNavItem'>Home</li>
<li id='goto_slide-2' class='slideNavItem'>Not Home</li>
<li id='goto_slide-3' class='slideNavItem'>Far from home</li>
</ul>
</nav>
<main>
<div id='slide-1' class='slide active'>
<table>
<caption>This is a table at home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id='slide-2' class='slide inactive'>
<table>
<caption>This is a table not at home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
<div id='slide-3' class='slide inactive'>
<table>
<caption>This is a table far from home</captin>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
body {
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 1em;
cursor: pointer;
}
table {
border-collapse: collapse;
border: 1px solid #000;
margin-bottom: 1em;
}
main {
display: flex;
width: 303%;
}
.slide {
width: 100%;
margin: 1em;
}
table tr:nth-child(even) {
background-color: lightgrey;
}
table td {
border: 1px solid lightgray;
}
#slide-1 table {
width: 100%;
}
#slide-1 table caption {
background-color: lightblue;
border: 1px solid #000;
}
#slide-2 table {
width: 100%;
}
#slide-2 table caption {
background-color: lightgreen;
border: 1px solid #000;
}
#slide-3 table {
width: 100%;
}
#slide-3 table caption {
background-color: lightyellow;
border: 1px solid #000;
}
$("tbody").sortable({
items: "> tr"
});
$(document).on("click", ".slideNavItem", function() {
var navID = $(this).attr('id');
console.log(navID);
var slideTo = $('#' + navID.split("_")[1]);
console.log(slideTo);
var inactiveElems = $("main").find(".slide.inactive").toggleClass("inactive");
var curActiveElem = $("main").find(".slide.active");
var wrapper = slideTo.closest("main");
console.log(wrapper);
var button = $(this);
var wrapperInlineStyles = wrapper.attr('styles');
if (wrapperInlineStyles === undefined) {
wrapperInlineStyles = ""
}
var elemPos = slideTo.offset().left;
console.log(elemPos);
var moveTo = (wrapper.offset().left) - (elemPos);
console.log(moveTo);
wrapper.css({
"transform": "translate(" + moveTo + "px, 0)",
"transition": "1s ease-in-out"
});
wrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
$("main").find(".slide.active").removeClass("active") // remove active class from old position
slideTo.addClass("active"); // add active classs to new position
$("main").find(".slide").not(".active").addClass("inactive"); // now add hide (add inactive class to)the other elemens
wrapper.css({
"transition": "none"
});
});
});
It's probably a problem with jQuery having trouble calculating position with static positioning and translate transform. One easy solution would be to set your main element to position absolute and apply the -16 translate you apply when returning home. Like this:
main {
display: flex;
width: 303%;
position: absolute;
transform: translateX(-16px)
}
http://codepen.io/anon/pen/bwqPqk