Develop Reference

Alternating color rows based on values of cells

I'd like to have a table with alternating colors of rows but rows with the same value should have unitary background color. Can I achieve such an effect with CSS?
Example:

JQuery
(feel free to simplify and edit this)
$(function() {
let elems = $('tr:not(".head")');
let count = 0;
for (let i=0; i<elems.length; i++) {
let el = $(elems[i]),
prev = $(elems[i-1]);
let isEven = (count % 2 == 0);
if (isEven) {
el.css('background', 'red');
} else {
el.css('background', 'yellow');
}
if (el.text() == prev.text()) {
let clr = prev.css('background');
el.css('background', clr);
} else {
count++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="head">
<th>One</th>
<th>Two</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
</table>

Scroll for the table to apply it to tbody

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>

how can i get table column data using column header name in jquery

I am trying to get table column data by using the name of header(th) in jquery.
x1 x2 y1 y2
2 1 2 4
4 4 5 3
7 5 3 4
7 3 1 9
in this case i want to get data by x2 then it should return me 1,4,5,3
my table-
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>122</td>
<td>12</td>
</tr>
</tbody>
</table>

Here's a way using jQuery filter() function and CSS nth-child() selector:
<table border="1" class="dataframe" id="table">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>x2</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>7</td>
<td>3</td>
<td>1</td>
<td>9</td>
</tr>
</tbody>
</table>
<script>
let chosenHeaderText = 'x2',
tableHeaders = $('#table th'),
chosenHeader = tableHeaders.filter(function(header) {
return tableHeaders[header].innerHTML == chosenHeaderText;
}),
chosenHeaderIndex = chosenHeader[0].cellIndex + 1,
rows = $('#table tr td:nth-child(' + chosenHeaderIndex + ')');
rows.each(function(row) {
console.log(rows[row].innerHTML);
});
</script>
You can replace the chosenHeaderText variable with whichever header you need.

You can utilise jQuery map() function to first get the index of your header and on that basis iterate the body of the table.
const getData = (column) => {
let indx
$('thead').find('th').map(function(i){
if($(this).text() === column)
indx = i
})
$('tbody').find('tr').map(function(i){
let chk = $(this).find('td').eq(indx).text()
console.log(chk)
})
}
let data1 = getData(`x1`)
console.log(data1)
console.log(`=================`)
let data2 = getData(`y1`)
console.log(data2)
console.log(`=================`)
let data3 = getData(`y2`)
console.log(data3)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1A</td>
<td>122</td>
<td>12</td>
</tr>
<tr>
<td>1B</td>
<td>123</td>
<td>13</td>
</tr>
<tr>
<td>1C</td>
<td>124</td>
<td>14</td>
</tr>
</tbody>
</table>

How to select 5 successive rows

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>

How to retrive specific row from html table equal of something by jquery

I have a table dynamically generated by php. In this table have information for different semester (such as : first, second, third etc). Now i want to show specific semester information if user click a link from same table without a query. I am newbie in this forum and its my first question. sorry for poor english. !
My code
<table id="course_offering" class="table table-striped table-hover custab ">
<thead>
<tr>
<th>Course Code</th>
<th>Course title</th>
<th>Credit Hours</th>
<th>Contact Hours</th>
<th>Pre Requisite</th>
<th>Course Type</th>
<th>Year</th>
<th>Semester</th>
<th>Offering Year</th>
<th>Offering Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>1</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2015</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
</tbody>
</table>

here is a working example:
http://jsfiddle.net/K7PjR/1/
function getRowsByText(text) {
var resultRows = $();
$('tr').each(function () {
var row = $(this);
var rowText = row.text().trim();
if (rowText === text) {
resultRows = resultRows.add(row); //return the row
}
});
return resultRows;
}
getRowsByText('apple').css('color', 'red');
getRowsByText('orange').css('color', 'orange');
HTML:
<table>
<tr>
<td>apple</td>
</tr>
<tr>
<td>orange</td>
</tr>
<tr>
<td>bannana</td>
</tr>