How do I remove a row from a table - javascript

Below code removes the row if it contains an empty cell in the 3rd column.
It makes use of Jquery's fadeOut-method for a nice effect.
Thing is that I can't get the code working without the faeOut method.
I tried $(this).remove(); but that does not work.
function TT(){
var A = 3;
$('table tbody tr td:nth-child(' + A + ')').each(function(index){
var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text();
if (cellValue.length === 0){
$(this).parents('tr').fadeOut(function(){
$(this).remove();
});
}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>


Multiple times you are querying “table” .which is not required. Only the first loop to iterate through all 3rd column elements is sufficient to find out if the cell is empty and to remove the complete row.
function TT(){
var A = 4;
$('table tbody tr td:nth-child(' + A + ')')
.each(function(index){
if($(this).text()=="" ) {$(this).parent().remove();}
});
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td>D6</td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>


No need to use .each() you can just use .filter()
function TT(){
var A = 3;
$('table tbody tr').filter(function(){
return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces
}).remove();
}
table {
margin: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 95%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
<td>F1</td>
<td>G1</td>
<td>H1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td></td>
<td>E2</td>
<td>F2</td>
<td>G2</td>
<td>H2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
<td>F3</td>
<td>G3</td>
<td>H3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
<td>F4</td>
<td>G4</td>
<td>H4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td></td>
<td>E5</td>
<td>F5</td>
<td>G5</td>
<td>H5</td>
</tr>
<tr>
<td>A6</td>
<td>B6</td>
<td>C6</td>
<td></td>
<td>E6</td>
<td>F6</td>
<td>G6</td>
<td>H6</td>
</tr>
<tr>
<td>A7</td>
<td>B7</td>
<td>C7</td>
<td>D7</td>
<td>E7</td>
<td>F7</td>
<td>G7</td>
<td>H7</td>
</tr>
<tr>
<td>A8</td>
<td>B8</td>
<td>C8</td>
<td></td>
<td>E8</td>
<td>F8</td>
<td>G8</td>
<td>H8</td>
</tr>
<tr>
<td>A9</td>
<td>B9</td>
<td>C9</td>
<td>D9</td>
<td>E9</td>
<td>F9</td>
<td>G9</td>
<td>H9</td>
</tr>
<tr>
<td>A10</td>
<td>B10</td>
<td>C10</td>
<td>D10</td>
<td>E10</td>
<td>F10</td>
<td>G10</td>
<td>H10</td>
</tr>
<tr>
<td>A11</td>
<td>B11</td>
<td>C11</td>
<td>D11</td>
<td>E11</td>
<td>F11</td>
<td>G11</td>
<td>H11</td>
</tr>
</table>
</br>
<button type="button" onclick="TT()">Click Me!</button>
Note: parent() , parents() , closest() all of those should work if you start from <td> .. but for me a simple thing is to start
from the <tr> not from the <td>
Another note: :nth-child(index) index starts from 1 .. and :eq(index) starts from 0

Related

Is there a way of comparing the row of two selected tables in HTML?

I have multiple tables and i want to select any two tables and then perform some task on each row on click of a button(Calculate) . How can I access data of selected table so that i can compare their data for the task? Currently I am using checkbox to select the tables but stuck how to access the content of the tables for the comparison?
var selectedRows = document.getElementsByClassName('selected');
function inputChanged(event) {
console.log(table)
alert(selectedRows)
console.log(selectedRows)
event.target.parentElement.parentElement.className =
event.target.checked ? 'selected' : '';
}
.table_container{
float:left;
width:25%;
}
.container::after{
content: "";
clear: both;
display: table;
}
table{
margin: 0 auto;
border-radius: 10px;
}
tr{
padding: 15px;
text-align: center;
}
td{
color: black;
text-align: center;
vertical-align: middle;
border: 1px double white;
height: 50px;
background-color: #e1edf9;
width:272px;
}
.sub_text{
font-size: 12px;
font-style: italic;
color: #0071ce;
font-weight: 100;
}
th{
background-color: #0071ce;
text-align: center;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-weight: bold;
}
.header{
color: #0071ce;
font-weight: bold;
padding: 10px;
}
<div class="container">
</div>
<div class="table_container">
<table id="plans">
<tr><th>Plan A
<input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
</th></tr>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="plans" >
<tr><th>Plan B
<input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
</th></tr>
<tr>
<td>$1386.20</td>
</tr>
<tr>
<td>HSA match:up to $1350</td>
</tr>
<tr>
<td>HSA match:up to $7010</td>
</tr>
<tr>
<td>$222</td>
</tr>
<tr>
<td>$55</td>
</tr>
<tr>
<td>$432</td>
</tr>
<tr>
<td>$300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="plans">
<tr><th>Plan C</th></tr>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$1161.30</td>
</tr>
<tr>
<td>$513.30</td>
</tr>
<tr>
<td>$286.20</td>
</tr>
<tr>
<td>HSA match:up to $1350</td>
</tr>
<tr>
<td>HSA match:up to $1700</td>
</tr>
<tr>
<td>$80</td>
</tr>
</table>
<button onclick="Calculate()">Compare</button>
</div>
</div>

You mean
const container = document.getElementById("container");
document.getElementById("check").addEventListener("click", function() {
const checks = container.querySelectorAll(".select:checked")
if (checks.length >= 2) {
checks.forEach(chk => {
const table = chk.nextElementSibling;
console.log(table.querySelectorAll("td")[3].textContent)
})
}
})
td {
border: 1px solid black
}
<button type="button" id="check">Compare</button>
<div id="container">
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 1 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 1 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 2 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 2 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
<input type="checkbox" class="select">
<table>
<tbody>
<tr>
<td>Row 1</td>
<td>Table 3 Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Table 3 Row 2 Cell 2</td>
</tr>
</tbody>
</table>
</div>

How to hide element correctly in html tables

I would like to behind row2by default and by clicking tables,it will show itself.
When I try my work like below,row2 is behind. but the shape of tables distorted.
I would like to align tables and behind row2 by deafault.
How can I fix it ?
Why this table distorted?
Thanks
$(function() {
$("table").click(function() {
$("table tr:eq(1)").toggleClass('show');
});
});
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;
cursor:pointer}
tr:nth-child(2):not([class]) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

If you want to toggle the row, I suggest you have a concept of "hide", rather than "show".
Also, get rid of the second row header. Not sure why you need it, if you are spanning 2 rows.
$(() => {
$('table').click(function(e) {
$(this).find('tr:eq(1)').toggleClass('hide');
});
});
table, th, td {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 0.25em;
}
th {
cursor: pointer
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody>
<tr>
<th rowspan="2">Header</th>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr class="hide">
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</tbody>
</table>

jQuery - Hide last child <td> from <table>

I want to hide if the hobby doesn't have value (empty). But if the hobby has value is still show. How to condition it? I try using jQuery.
$("tr:last-child td:last-child").css("font-weight","bold")
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>

You can hide the .parent() tr if the .text() of the td is blank.
$("tr:last-child td:last-child").each(function(index, td) {
if($(td).text() === ""){
$(td).parent().hide();
}
});
table {
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
tr:last-child td:last-child {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>

You need to use text() to get the text of td
$("tr:last-child td:last-child").each(function(index,element){
$(element).css("font-weight","bold");
});
$("tr:last-child td:last-child").each(function(index,element){
if($.trim($(element).text()).length == 0){
$(element).parent().hide();
}
});
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>

change this:
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
to:
if($("tr:last-child td:last-child").text().length < 1){
$("tr:last-child").hide()
}

How to get Specific row height in my table in for loop, Finally i need to Add each row height

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>

How to auto-scroll a related html table

I have 2 tables, and they are related, because they are showing the same in different languages. When I press Key down or Key up, the item inside my clicked table moves and scrolls down, but not the related one. How can I make this?
Here is a piece of the html5 code:
<div id="first_table">
<table id="first_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="first_table_container">
<table id="first_text_table">
<tbody id="first_text_table_body">
</tbody>
</table>
</div>
<div id="first_current">
<textarea id="first_current_text" ></textarea>
</div>
</div>
<div id="second_table">
<table id="second_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="second_table_container">
<table id="second_text_table">
<tbody id="second_text_table_body">
</tbody>
</table>
</div>
<div id="second_current">
<textarea id="second_current_text" ></textarea>
</div>
</div>
Here the CSS:
#first_table
{
width:90%;
float: left;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:33px;
margin-bottom: 1%;
}
#second_table
{
width:90%;
float: right;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:30px;
margin-bottom: 1%;
}
#first_table_container, #second_table_container
{
height: 200px;
overflow-y: scroll;
border-style: solid;
border-width: 0px;
border-color: #5e5e5e;
border-bottom-width:1px;
}
And now the javasrcipt (jQuery) code:
if (e.keyCode == 38) { // up
var index = $('#first_text_table_body tr > td').index();
$('#second_text_table_body').scrollTo(index);
}
I've tried scrollTo(), but I can't make it works properly. My goal is, if I press key up, my first list scrolls up and the second list has to scroll up as well.
Thank you!

JSFiddle
HTML
<div id="first_table">
<table id="first_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="first_table_container">
<table id="first_text_table">
<tbody id="first_text_table_body">
<tr>
<td>abc</td>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tr>
</tbody>
</table>
</div>
<div id="first_current">
<textarea id="first_current_text"></textarea>
</div>
</div>
<div id="second_table">
<table id="second_header">
<tr>
<th class="field_1">1</th>
<th class="field_2">2</th>
<th class="field_3">3</th>
<th class="field_4">4</th>
<th class="field_5">5</th>
</tr>
</table>
<div id="second_table_container">
<table id="second_text_table">
<tbody id="second_text_table_body"></tbody>
<tr>
<td>abc</td>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tr>
</table>
</div>
<div id="second_current">
<textarea id="second_current_text"></textarea>
</div>
</div>
CSS
#first_table {
width:45%;
float: left;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:33px;
margin-bottom: 1%;
}
#second_table {
width:45%;
float: right;
border-radius: 5px;
border-color: black;
border-collapse: collapse;
margin-right:30px;
margin-bottom: 1%;
}
#first_table_container, #second_table_container {
height: 200px;
overflow-y: scroll;
border-style: solid;
border-width: 0px;
border-color: #5e5e5e;
border-bottom-width:1px;
}
JS
$(document).ready(function () {
$(document).keydown(function (e) {
console.log(e);
if (e.keyCode == 38) { //up
$("#first_table_container").animate({
scrollTop: 0
});
$("#second_table_container").animate({
scrollTop: 0
});
}
if (e.keyCode == 40) { //down
$("#first_table_container").animate({
scrollTop: 200
});
$("#second_table_container").animate({
scrollTop: 200
});
}
});
});
I used scrollTop instead, it just need a value of where to go. my solution is just to get you starting. you can continue this to calculate the scrollTop value you want to set on each click..
You should also clean the code.

Categories

Resources