I have an html table
<table class="table">
<thead class="table-primary">
<tr>
<th>Date</th>
<th>SKU</th>
<th style="width: 300px;">Activity</th>
<th>QTY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>Test</strong><br />
Manish Rijal - JOB# 12345 <br />
1TestBiraz
</td>
<td style="text-align: center">78</td>
<td style="text-align: center">56</td>
<td style="text-align: center">99</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>qwert</strong><br />
Manish Rijal - JOB# 12345 <br />
asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong> Leave</strong><br />
Manish Rijal - JOB# 12345 <br />
asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
</tbody>
</table>
<div>
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>
The value of the amount is dynamic and there might be multiple row. Right Now I have done hard coded for $800.00. How can I sum the value of all Amount Column and display in Balance Due. I tried by couldn't get there.
https://jsfiddle.net/n6qo3u1b/
If you want to get the prices from Quantity and Rate then you can do it like.
var price = 0;
$('table tbody tr').each(function() {
var rate = +$(this).find("td:nth-last-child(3)").text();
var amount = +$(this).find("td:nth-last-child(2)").text();
price = price + (rate * amount);
})
$('.price strong').text('$' + price)
Please note I've added the class price to the div that surrounds the "price/strong"
Demo
var price = 0;
$('table tbody tr').each(function() {
var rate = +$(this).find("td:nth-last-child(3)").text();
var amount = +$(this).find("td:nth-last-child(2)").text();
price = price + (rate * amount);
})
$('.price strong').text('$' + price)
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top: 30px;
}
td,
th {
/*border: 1px solid #dddddd;*/
text-align: left;
padding: 8px;
}
thead {
background: #DCE9F1
}
thead tr th {
color: #4F90BB;
}
tr:nth-child(even) {
background-color: #dddddd;
width: 50%;
}
hr {
color: #5A97BF;
width: 90%;
text-align: center;
height: 1px;
}
hr.new4 {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead class="table-primary">
<tr>
<th>Date</th>
<th>SKU</th>
<th style="width: 300px;">Activity</th>
<th>QTY</th>
<th>RATE</th>
<th>AMOUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>Test</strong><br /> Manish Rijal - JOB# 12345 <br /> 1TestBiraz
</td>
<td style="text-align: center">78</td>
<td style="text-align: center">56</td>
<td style="text-align: center">99</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong>qwert</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
<tr>
<td>09/01/2020</td>
<td></td>
<td>
<strong> Leave</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
</td>
<td style="text-align: center">8</td>
<td style="text-align: center">4</td>
<td style="text-align: center">32</td>
</tr>
</tbody>
</table>
<hr style="border-top: 1px dotted #5A97BF" />
<div class="price">
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>
You can also do it with vanilla javascript like so:
const nodes = document.querySelectorAll('td:last-child')
const arr = Array.from(nodes);
const res = arr.reduce((acc, curr) => {
return acc += Number(curr.textContent)
}, 0)
console.log(res);
Related
setInterval(function () {
for (var i = 1; i <= 5; i++) {
var number = 1 + Math.floor(Math.random() * 100);
var getNum = $('#res' + i).html(number);
if (getNum.html() >= 50) {
$('#res' + i + 'mult').html("right");
var num = 1;
for (var j = 1; j <= 6; j++) {
$("#row" + num++ + "-" + 2).css("background-color", 'red');
}
} else {
var num2 = 1;
$('#res' + i + 'mult').html("left");
$("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
}
}
},
1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script src="../!Needs/jquery.min.js"></script>
<style>
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res4"></td>
<td id="res4mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res5"></td>
<td id="res5mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td id="row1-1">*</td>
<td id="row1-2">Starter</td>
<td id="row1-3">*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row2-1">1</td>
<td id="row2-2">2</td>
<td id="row2-3">3</td>
<td id="row2-4">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row3-1">1</td>
<td id="row3-2">2</td>
<td id="row3-3">3</td>
<td id="row3-4">4</td>
<td id="row3-5">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-1">1</td>
<td id="row4-2">2</td>
<td id="row4-3">3</td>
<td id="row4-4">4</td>
<td id="row4-5">5</td>
<td id="row4-6">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row5-1">1</td>
<td id="row5-2">2</td>
<td id="row5-3">3</td>
<td id="row5-4">4</td>
<td id="row5-5">5</td>
<td id="row5-6">6</td>
<td id="row5-7">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row6-1">1</td>
<td id="row6-2">2</td>
<td id="row6-3">3</td>
<td id="row6-4">4</td>
<td id="row6-5">5</td>
<td id="row6-6">6</td>
<td id="row6-7">7</td>
<td id="row6-8">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
</body>
</html>
I am trying to make a simple game. We have two tables. The table on the top, which has 5 rows and 3 columns - including: pin, random number and direction (left or right) - and the bottom table which has 6 rows. The cell at the first row and second column ($("#row1-2")) is the beginning of our game.
The Left/Right values in the top table determine the direction, left or right, of the cell that should be painted in the corresponding row in the bottom table.
We have a simple condition to get a direction value. We generate a random number. If the random number is > 50, the direction is set to "right"; otherwise, it is set to "left".
That is, if, for example, the values in the top table were as follows:
Pin 1 => 28 => Left
Pin 2 => 9 => Left
Pin 3 => 56 => Right
Pin 4 => 99 => Right
Pin 5 => 14 => Left
Then, in the bottom table, the game is started from the starter column, and as we incrementally descend the rows, the column that gets painted is determined by the "left" or "right" values that were generated above.
In the bottom table, because the value of pin 1 (28) is less than 50, the painted column will move to the "left" from the starter block $("#row1-2"): $("#row2-2").
And because the value of pin 2 (9) also maps to "left", the painted column in the next row should also be to the "left": $("#row3-2").
For pin 3, we have "right", so the column in the next row to the right of the last painted cell should be painted: $("#row4-3").
...and so on until all the rows have a painted cell.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script src="../!Needs/jquery.min.js"></script>
<style>
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res4"></td>
<td id="res4mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res5"></td>
<td id="res5mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td id="row1-1">*</td>
<td id="row1-2">Starter</td>
<td id="row1-3">*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row2-1">1</td>
<td id="row2-2">2</td>
<td id="row2-3">3</td>
<td id="row2-4">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row3-1">1</td>
<td id="row3-2">2</td>
<td id="row3-3">3</td>
<td id="row3-4">4</td>
<td id="row3-5">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-1">1</td>
<td id="row4-2">2</td>
<td id="row4-3">3</td>
<td id="row4-4">4</td>
<td id="row4-5">5</td>
<td id="row4-6">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row5-1">1</td>
<td id="row5-2">2</td>
<td id="row5-3">3</td>
<td id="row5-4">4</td>
<td id="row5-5">5</td>
<td id="row5-6">6</td>
<td id="row5-7">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row6-1">1</td>
<td id="row6-2">2</td>
<td id="row6-3">3</td>
<td id="row6-4">4</td>
<td id="row6-5">5</td>
<td id="row6-6">6</td>
<td id="row6-7">7</td>
<td id="row6-8">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<script>
setInterval(function () {
for (var i = 1; i <= 5; i++) {
var number = 1 + Math.floor(Math.random() * 100);
var getNum = $('#res' + i).html(number);
if (getNum.html() >= 50) {
$('#res' + i + 'mult').html("right");
var num = 1;
for (var j = 1; j <= 6; j++) {
$("#row" + num++ + "-" + 2).css("background-color", 'red');
}
} else {
var num2 = 1;
$('#res' + i + 'mult').html("left");
$("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
}
}
},
1000);
</script>
</body>
</html>
I find it very difficult to synchronize the cells in the top table with those in the second. One problem is that row 1 in the first table has a left/right value; but in the second table, row 1 is the Starter - the left/right decisions don't start until row 2. I would simplify this by making the corresponding rows in the two tables have the same number. I would also 0-index the rows and columns (as opposed to having them start at 1) because this is easier for my brain as it is consistent with arrays and typical loops.
To determine which column is active as we descend the table, it was helpful for me to realize that a "left" step means the column index stays the same in the next row, and a "right" step means the index increases by 1.
We can declare a variable to track the current column. We will start it at 1 since we know the "Starter" is at the [1] index of its row: const col = 1;. Then, as we loop through the rows, we increment col by 1 if we are stepping right or 0 if we are stepping left.
We can package our game logic into a play function and invoke it once - play() - or at an interval - setInterval(play, 1000).
const play = () => {
let col = 1;
// reset the game board
$('td').css('background-color', 'white');
$('td#starter').css('background-color', 'red');
for (let row = 0; row < 6; row++) {
const pin = 1 + Math.floor(Math.random() * 100);
const isRight = pin > 50;
col += (isRight ? 1 : 0);
$(`#res${row}`).text(pin);
$(`#res${row}mult`).text(isRight ? 'right' : 'left');
$(`#row${row}-${col}`).css("background-color", isRight ? 'yellow' : 'red');
}
};
play();
//setInterval(play, 1000);
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res0"></td>
<td id="res0mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res4"></td>
<td id="res4mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td>*</td>
<td id="starter">Starter</td>
<td>*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row0-0">1</td>
<td id="row0-1">2</td>
<td id="row0-2">3</td>
<td id="row0-3">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row1-0">1</td>
<td id="row1-1">2</td>
<td id="row1-2">3</td>
<td id="row1-3">4</td>
<td id="row1-4">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row2-0">1</td>
<td id="row2-1">2</td>
<td id="row2-2">3</td>
<td id="row2-3">4</td>
<td id="row2-4">5</td>
<td id="row2-5">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row3-0">1</td>
<td id="row3-1">2</td>
<td id="row3-2">3</td>
<td id="row3-3">4</td>
<td id="row3-4">5</td>
<td id="row3-5">6</td>
<td id="row3-6">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-0">1</td>
<td id="row4-1">2</td>
<td id="row4-2">3</td>
<td id="row4-3">4</td>
<td id="row4-4">5</td>
<td id="row4-5">6</td>
<td id="row4-6">7</td>
<td id="row4-7">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have also created an example fiddle.
I have the following html and would like to hide the collapsible table by default, only showing the top row. Which when clicked on, will pop out the rest of the table. Right now, it shows the whole table, only to hide once toggled.
<html>
<style>
table {
width: 300px;
border-collapse: collapse;
border-color: grey;
line-height: 1.7;
}
th {
background: #ffffff;
color: #000000;
font-weight: bold;
}
td, th {
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
td {
color: #000000;
}
.labels tr td {
font-weight: bold;
color: #feb330;
}
.label tr td label {
display: block;
}
.bold {
font-weight: bold;
}
[data-toggle="toggle"] {
display: none;
}
</style>
<table>
<tbody class="labels">
<tr bgcolor="#ffffff">
<td colspan="3">
<label for="14Season">2014 Season: 19</label>
<input type="checkbox" name="14Season" id="14Season" data-toggle="toggle">
</tr>
</tbody>
<tbody class="hide">
<tr bgcolor="#264033">
<td class="bold" colspan="1" style="color:#ffffff">Date</td>
<td class="bold" colspan="1" style="color:#ffffff">Scorigami</td>
<td class="bold" colspan="1" style="color:#ffffff">Total</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">0-6 L</td>
<td style="color:#ffffff">1</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">8-10 L</td>
<td style="color:#ffffff">2</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/22/13</td>
<td style="color:#ffffff">10-8 W</td>
<td style="color:#ffffff">3</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">3-2 W</td>
<td style="color:#ffffff">4</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">1-4 L</td>
<td style="color:#ffffff">5</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/26/13</td>
<td style="color:#ffffff">7-0 W</td>
<td style="color:#ffffff">6</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-2 W</td>
<td style="color:#ffffff">7</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-1 W</td>
<td style="color:#ffffff">8</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">13-6 W</td>
<td style="color:#ffffff">9</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">10-2 W</td>
<td style="color:#ffffff">10</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/13/14</td>
<td style="color:#ffffff">12-0 W</td>
<td style="color:#ffffff">11</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">8-2 W</td>
<td style="color:#ffffff">12</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">7-5 W</td>
<td style="color:#ffffff">13</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/27/14</td>
<td style="color:#ffffff">9-1 W</td>
<td style="color:#ffffff">14</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/2/14</td>
<td style="color:#ffffff">10-0 W</td>
<td style="color:#ffffff">15</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/3/14</td>
<td style="color:#ffffff">4-2 W</td>
<td style="color:#ffffff">16</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/4/14</td>
<td style="color:#ffffff">10-4 W</td>
<td style="color:#ffffff">17</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/16/14</td>
<td style="color:#ffffff">1-2 L</td>
<td style="color:#ffffff">18</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/17/14</td>
<td style="color:#ffffff">7-12 L</td>
<td style="color:#ffffff">19</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
</script>
</html>
I believe only a small change is required, but can't seem to get it right. Thanks for the help!
Adding
.hide {
display: none;
}
fixed the issue.
table {
display: none;
}
this should work. Also change,
[data-toggle="toggle"] {
display: block;
}
you can give to the table rows logical id's, then use a function to hide/show them
code to retrieve the table rows id's
var table = document.querySelector('table');
// listen for a click
table.addEventListener('click', function(ev){
// get the event targets ID
var serviceID = ev.target.id;
alert(serviceID);
})
var max = 0;
var customeheight;
var rowLength = $('.tbl tr').length;
function recordHeight () {
for (var i = 0; i <= rowLength; i++) {
customeheight = $(this).height();
//max+ = max + customeheight;
alert(customeheight);
}
}
recordHeight();
.tbl, tr, td {
border: 1px solid #ddd;
border-collapse: collapse;
}
.tbl {
width: 100%;
color: #333;
font-family: arial;
font-size: 11px;
}
.wrapData {
white-space: pre-wrap;
word-break: break-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This is my table , how can i get each row height, and i need to add total records height.-->
<body>
<table class="tbl">
<tr>
<th width="15%">Emp ID</th>
<th width="15%">Name</th>
<th width="60%">Role Description</th>
<th width="10%">Salary</th>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfs kldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslk fjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvf ksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbf sdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsd
fkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfs dbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdf
kjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjd fvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvf slkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfj
sdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvf jksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfsl
kfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsd kjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>10000</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfbl sdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfb
dsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvdskfgsdflskdhfksbdfjksvdghcvgvchsdbclksdsdfsdfsdfsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvf
ksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjks dvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslk
fjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdv fsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100001</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksj dvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvf
ksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsf ksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfk354d1dfg4f6d5g4
fdg4dfg465+f gdfg4df6g4sjdvfj sdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjks dvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvf
sdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdv
fskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdv
fksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100002</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfj gfdg g6f5d gdf 6g1 6 gf3dg1 gfd3g1d ksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100003</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100004</td>
</tr>
</table>
</body>
Try the following snippet
var max = 0;
var customeheight;
var rowLength = $('.tbl tr').length;
function recordHeight() {
jQuery('.tbl tr').each(function() {
customeheight = $(this).height();
console.log(jQuery(this).height());
alert(customeheight);
})
}
recordHeight();
.tbl, tr, td {
border: 1px solid #ddd;
border-collapse: collapse;
}
.tbl {
width: 100%;
color: #333;
font-family: arial;
font-size: 11px;
}
.wrapData {
white-space: pre-wrap;
word-break: break-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This is my table , how can i get each row height, and i need to add total records height.-->
<body>
<table class="tbl">
<tr>
<th width="15%">Emp ID</th>
<th width="15%">Name</th>
<th width="60%">Role Description</th>
<th width="10%">Salary</th>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfs kldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslk fjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvf ksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbf sdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsd
fkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfs dbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdf
kjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjd fvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvf slkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfj
sdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvf jksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfsl
kfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsd kjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>10000</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfbl sdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfb
dsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvdskfgsdflskdhfksbdfjksvdghcvgvchsdbclksdsdfsdfsdfsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvf
ksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjks dvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslk
fjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdv fsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100001</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksj dvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvf
ksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsf ksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfk354d1dfg4f6d5g4
fdg4dfg465+f gdfg4df6g4sjdvfj sdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjks dvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvf
sdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdv
fskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdv
fksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100002</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfj gfdg g6f5d gdf 6g1 6 gf3dg1 gfd3g1d ksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100003</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100004</td>
</tr>
</table>
</body>
In your recordHeight function, you are using $(this).height(). In your context, this keyword does not point to the rows. However, in this case, jQuery passes the rows in this keyword.
Try this by just modifying your code..
Use $('.tbl tr') instead of $('.tbl tr').length.. and change the recordHeight function and also set the equal height every tr element except the header tr.
var max = 0;
var customeheight;
var rowElement = $('.tbl tr');
function recordHeight() {
for (var i = 0; i < rowElement.length; i++) {
customeheight = $(rowElement[i]).height();
// Set equal max height for all tr element
if (max < customeheight) {
max = customeheight;
}
// Set new custom height for all tr element
// Note: this will also change the header height as the selector element is $('.tbl tr')
// $('.tbl tr').not($($(rowElement[0]))) will exclude the first element i.e is header row as per your html
$('.tbl tr').not($($(rowElement[0]))).height(max);
}
}
recordHeight();
.tbl,
tr,
td {
border: 1px solid #ddd;
border-collapse: collapse;
}
.tbl {
width: 100%;
color: #333;
font-family: arial;
font-size: 11px;
}
.wrapData {
white-space: pre-wrap;
word-break: break-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This is my table , how can i get each row height, and i need to add total records height.-->
<body>
<table class="tbl">
<tr>
<th width="15%">Emp ID</th>
<th width="15%">Name</th>
<th width="60%">Role Description</th>
<th width="10%">Salary</th>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfs kldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslk fjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvf ksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbf sdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsd
fkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfs dbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdf
kjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjd fvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvf slkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfj
sdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvf jksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfsl
kfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsd kjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>10000</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfbl sdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfb
dsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvdskfgsdflskdhfksbdfjksvdghcvgvchsdbclksdsdfsdfsdfsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvf
ksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjks dvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslk
fjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdv fsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100001</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksj dvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvf
ksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsf ksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfk354d1dfg4f6d5g4
fdg4dfg465+f gdfg4df6g4sjdvfj sdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjks dvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvf
sdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdv
fskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdv
fksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv
</div>
</td>
<td>100002</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfj gfdg g6f5d gdf 6g1 6 gf3dg1 gfd3g1d ksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100003</td>
</tr>
<tr>
<td>01</td>
<td>Sara</td>
<td>
<div class="wrapData">sdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfvsdfdsfsdfkjfbdsfksbfsdbfskldfblsdvfslkfjvsdjvfsjdvfjksdvfksjdvfjsdvfskjdvfksdvfsdkjfvsjdfv</div>
</td>
<td>100004</td>
</tr>
</table>
</body>
I and trying to apply a blinking effect css class to the whole table when someone presses the button. However, some rows are not being affected by the blink class.
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
All the elements that have their own background-color style won't inherit the style from the container. You need to put the class on those elements.
$("#alarm").click(function() {
$("#tableContainer td, #tableContainer th").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer td, #tableContainer th").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
Check This
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#status").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#status").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr id="status" class="status">
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
The answer was to make my jQuery addClass and Remove Class to be more specific:
$("#alarm").click(function(){
$("#tableContainer th").addClass("blink");
$("#tableContainer td").addClass("blink");
});
$("#stopAlarm").click(function(){
$("#tableContainer th").removeClass("blink");
$("#tableContainer td").removeClass("blink");
});
I am trying to add a blinking effect to my table when a button is pressed. My code kind of achieves this by making the whole table blink however it makes the data in the cells without an existing css hard to read. Therefore, I am trying to figure out if it is possible to make the just the border of each cell have the blinking effect instead of the whole cell so that the data is still easily readable as seen in the status row. Is this possible without having to add a css to every single cell?
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
To achieve this you first need to put borders on the th and td elements. Then you can amend the .blink selector to amend the colours of the border, instead of the background, like this:
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
table {
border-collapse: collapse;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #FFF;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink th,
.blink td {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
border-color: white;
}
to {
border-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>