I have a table with 4 rows and columns, I want to first show half of it and then show half of the rest. How to do it?
I have tried this js code with event fadeIn() but not working:
$.fn.slide=function(){
var self=this,kids=self.children()
setInterval(function(){
kids.filter(':hidden').fadeIn()
$(this).appendTo(self)
kids=self.children()
},1000)
return this
}
$(function(){
$('tbody').slide()
})
My html:
<table id="myTbl">
<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>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Like first display rows from 1->8 and after that delete it, display from 9->16.
The first mistake is that in the setInterval you used this which referred to window and not the table as I think you thought, using the code below every x seconds you will have the data change:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setInterval(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<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>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Instead if you need just one time slide you need setTimeout like:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setTimeout(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<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>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Reference:
setInterval
setTimeout
Related
When I fix the table header (see code below) at a top position ohter than 0, the body apears above the header when I scroll it.
.test {
padding-top: 50px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
Now I´m using another TH with background color white before the TH with the column names. The code that i´m using now.
.test {
padding-top: 0px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
.spacer {
background-color: white;
position: sticky;
top: 0px;
height: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th colspan="4" class="spacer"></th>
</tr>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
Is there a better solution? I tried to move the body but it doesn´t work.
Instead of padding, use a pseudo element to create that space and make it sticky too:
.test {
position:relative;
}
.test::before {
content:"";
display:block;
background:#fff;
position:sticky;
z-index:3;
top:0;
height: 50px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
I add position relative to table class and fix it
.test {
padding-top: 0px;
}
th {
background-color: orange;
position: sticky;
top: 0;
}
.spacer {
background-color: white;
position: sticky;
top: 0px;
height: 50px;
}
.table{
position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th colspan="4" class="spacer"></th>
</tr>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
HTML Table that is happening now
I'm trying to take this HTLM table with numbers on it the first column added to the second equals the third. some of the sum column are not correct. the correct answer is in the fourth column. I need to use Javascript to change the background color of the rows that are not correct and add in the correct number? This is what I have so far? The attached picture is what is coming up to far.
This picture is what the HTML Table is supposed to look like
Please help
for (var m = 0; m < math.length; m++) {
// math[m][0] = the first element of the m-th array (indices start at 0)
// math[m][1] = the second element of the m-th array
// math[m][2] = the third element of the m-th array
document.write(math[m][0] + ' + ' + math[m][1] + ' = ' + math[m][2] + "<br>" +' Actual answer = '+ (math[m][0]+ math[m][1])+ "<br>");
}
</script>
<table class="mathTable" id="math" style="width:80%"; border="1em";>
<tr>
<th>1st Number</th>
<th>2nd Number</th>
<th>Answer</th>
<th>Actual Answer</th>
</tr>
<tr class='calculation'>
<td>5</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>7</td>
<td>6</td>
<td>13</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>5</td>
<td>10</td>
<td>10</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>3</td>
<td>13</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>4</td>
<td>7</td>
<td>11</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>3</td>
<td>9</td>
<td>12</td>
<td>12</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>5</td>
<td>12</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>2</td>
<td>6</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>9</td>
<td>14</td>
<td>14</td>
</tr>
<tr class='calculation'>
<td>6</td>
<td>6</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
Thank you
Tables are made up of rows and cells.
It's a good idea to use the thead and tbody tags in your table,
and recommended to separate the css from the body elements
to change the background color: add a class to the element with the chosen color
const tableMath = document.getElementById('table-math');
for (let line=1; line < tableMath.rows.length; line++)
{
if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
{
tableMath.rows[line].cells[3].classList.add('badAnswer')
}
}
table {
border-collapse: collapse;
width: 80%;
margin: 1em;
}
td,th {
border: solid grey 1px;
padding: 5px;
}
th {
background-color: #7fffd5;
}
td {
text-align: center;
}
.badAnswer {
background-color: #f47c6f;
}
<table id="table-math">
<thead>
<tr>
<th> 1st Number </th>
<th> 2nd Number </th>
<th> Answer </th>
<th> Actual Answer </th>
</tr>
</thead>
<tbody>
<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>
<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
</tbody>
</table>
i want to find value in row of table. Sample , i have a this case
$("tr[id*='row']").each(function (i, el) {
//if($this.value() >10)
//console.log('This value in cell is: ' + this.value);
});
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
In this case above , i want to compare and show the value in cell, which more than 10, but i confused in define the value in cell. Mabe you can give me adviced for this case .
Use find for td values.
$("tr[id*='row']").find('td').each(function(i, el) {
var val = $(this).text();
if (val > 10)
console.log('This value in cell is: ' + $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
$(document).ready(function(){
$("tr[id*='row']").each(function () {
var td = $(this).find("td");
var countdeeptd = td.length;
td.each(function(i,el){
if(td.eq(i).text() > 10)
console.log('This value in cell is: ', td.eq(i).text());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
I'm trying to get one random row from an array which is composed of 100 rows. Some are hidden, other are visible.
My aim is to get a random visible row, and clone it in another table. (visible and hidden row are classified, that's why I need that !)
My code:
<table id="Random">
</table>
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
<script>
$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length) + 1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];
$("#Random").html(identifiedRow);
</script>
Here you go with a solution https://jsfiddle.net/1hok7xme/
$("#Random").html("");
$('#Classified tr').each(function(){
if($(this).is(':visible')){
$("#Random").append(`<tr>${$(this).html()}</tr>`);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random Table:
<table id="Random">
</table>
<br/>
Classified Table:
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
Hope this will help you.
Your issue is in these lines:
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length)+1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];
Change them to:
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd)[0];
jQuery .eq() requires an integer indicating the 0-based position of the element.
$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd);
//$("#Random").html(identifiedRow);
$("#Random").append(identifiedRow.clone());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random table: <br/>
<table id="Random">
</table>
Classified table: <br/>
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
Ok, got it ! Thanks to everyone. Each+Array. ;)
var arrayTmp = [];
var i = 0;
$('.Monstres tbody tr').each(function(){
if($(this).is(':visible')){
arrayTmp[i] = '<tr>'+$(this).html()+'</tr>';
i++;
}
});
var arrayTmp = arrayTmp[Math.floor(Math.random()*arrayTmp.length)];
$(".Random table").append(arrayTmp);
I'm trying to create a table with a fixed header, where the body scrolls under the head - which is fine, and there's lots of great examples out there.
The complication is that I want to be able to have sticky subheaders that scroll with the rest of the table, until they hit the table header, and then don't move until the rest of the section has scrolled underneath them, at which point they're replaced by the next sticky subheader (a little like the iphone address book). An example of how I need it to look: Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery
The example above isn't done with a table, and i have a lot of tabular data I need to show, so it will need to be a table.
I've not been able to find an example of this working so far and everything I've tried has failed miserably. I've included a link to a jsfiddle example that doesn't have any fixed heads etc, as I thought it would avoid conflicts with other solutions: https://jsfiddle.net/q7zLhus0/
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</thead>
<tbody>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
</tr>
<tr>
<td>1</td>
<td>6</td>
<td>3</td>
<td>6</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>S</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>5</td>
<td>3</td>
<td>7</td>
<td>9</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
<td>3</td>
<td>H</td>
<td>D</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>T</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>W</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>3</td>
<td>W</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
</tr>
<tr>
<td>1</td>
<td>9</td>
<td>E</td>
<td>3</td>
<td>S</td>
</tr>
<tr>
<td>T</td>
<td>4</td>
<td>D</td>
<td>H</td>
<td>S</td>
</tr>
<tr>
<td>4</td>
<td>S</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>R</td>
<td>7</td>
<td>S</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 4</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 5</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 6</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 7</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 8</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
</tbody>
Any help would be greatly appreciated. This one has really stumped me.
Add This Function
function stickyTitles(stickies) {
var thisObj = this;
thisObj.load = function () {
stickies.each(function () {
var thisSticky = jQuery(this).append('<span class="test" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
jQuery(window).off("scroll.stickies").on("scroll.stickies", function () {
thisObj.scroll();
});
}
thisObj.scroll = function () {
stickies.each(function (i) {
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i + 1),
prevSticky = stickies.eq(i - 1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos <= jQuery(window).scrollTop()) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
}
jQuery(document).ready(function () {
new stickyTitles(jQuery(".subheader")).load();
});
Demo Link -https://jsfiddle.net/kjo9w57a/1/