Find the largest line numbers and implement the formula - javascript

I have output tables from php. I have the highest numbers with class topCislo. And every two lines of the result implement the highest numbers in the formula. All this until the full page is loaded.
Output table:
<table class="tabulka">
<tr class="timy">
<td class="box">
<div class="name"><img alt="Barca" src="#" class="logo" title="Barca">Barca </div>
</td>
<td class="cislo">1.08</td>
<td class="cislo">1.12</td>
<td class="cislo">1.07</td>
<td class="cislo">8.50</td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
<tr class="timy">
<td class="box">
<div class="name"><img alt="rTE" src="#" class="logo" title="rTE">rTE </div>
</td>
<td class="cislo">5.25</td>
<td class="cislo">6.44</td>
<td class="cislo">6.67</td>
<td class="cislo">6.67</td>
<td class="cislo">8.50</td>
<td class="cislo">6.00</td>
<td class="cislo"></td>
<td class="cislo">4.96</td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
</table>
<table class="tabulka">
<tr class="timy">
<td class="box">
<div class="name"><img alt="Sami" src="#" class="logo" title="Sami">Sami </div>
</td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo">7.76</td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
<tr class="timy">
<td class="box">
<div class="name"><img alt="eSuba" src="#" class="logo" title="eSuba">eSuba </div>
</td>
<td class="cislo"></td>
<td class="cislo">1.05</td>
<td class="cislo">1.33</td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="cislo"></td>
<td class="growcell"></td>
</tr>
</table>
For every two rows 1 formula (2 rows = 1 table). For every table I need result from formula, the result from the formula will only be displayed, nothing will be done anymore.
Class topCislo (the highest number in row) is in href.
Formula:
((((topCislo1 / (topCislo1 + topCislo2)) * topCislo2) + ((topCislo2 / (topCislo2 + topCislo1)) * topCislo1)) / 2)
Please help me?

Related

Table Header Scroll using JS

Hi I am working on handling two tables one with table has table head and another table has table body.Need help in fixed table head and two table content with proper alignment.while fixing the header i could not align the table content subsequently to it. With help of id i fix the table header.can anyone fix this alignment.Thanks in advance.
<table id="table-1" class="table table-hover">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<body>
<div class="content">
<table class="table table-striped">
<tbody>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Here is the Demo

You want to show a fixed thead (clone table) on top of a scrolling table (original table).
Check this working demo: CODEPEN demo
Is this what you are looking for? How it works:
HTML part:
<!-- a CONTAINER for everything -->
<div id="table-holder">
<!-- a fixed TOP that is visible or hidden on scroll -->
<div id="table-top">
<!-- a TABLE CLONE that contains the THEAD -->
<table id="table-clone" border="1"></table>
</div>
<!-- a CONTAINER that allows the original table to scroll -->
<div id="table-scroll">
<!-- the ORIGINAL TABLE -->
<table id="table-original" border="1">
<!-- the THEAD -->
<thead>....</thead>
<!-- the TBODY -->
<tbody>....</tbody>
</table>
</div><!-- endof: #table-scroll -->
</div><!-- endof: #table-holder -->
CSS part:
#table-holder {
position:relative;
}
#table-top {
width:100%; /* important */
position:absolute; /* important -> always at top */
display:none; /* hidden at first */
}
#table-scroll {
float:left;
width:100%;
height:100%;
overflow-y:scroll; /* important */
}
table {
width:100%;
}
JS part (jQuery):
// set main table html vars
var $table_top = $("#table-top");
var $table_scroll = $("#table-scroll");
var $table_clone = $("#table-clone");
var $thead_original = $("#table-original thead");
var $thead_clone = $thead_original.clone();
// copy the original THEAD into table-top
$table_clone.append($thead_clone);
// adjust table-top width (consider the width of the Y scrollbar)
$table_top.css("width", $thead_original.width())
// set vars needed to show/hide table-top
var thead_height = $thead_original.height();
//// set the threshold for the show/hide action
var visible_top = $table_scroll.offset().top;
var table_top_visible = 0;
// set onScroll action: show/hide table-top
$table_scroll.on("scroll",function(){
// the the current offset of the original THEAD
var thead_top = $thead_original.offset().top;
//// get the position of the bottom of the THEAD
var thead_bottom = thead_top + thead_height;
// check if the original THEAD is hidden
if (thead_bottom < visible_top) {
// if the original is hidden -> show the clone
if (!table_top_visible) {
table_top_visible = 1;
$table_top.fadeIn();
}
} else {
// else, the original is visible -> hide the clone
if (table_top_visible) {
table_top_visible = 0;
$table_top.fadeOut();
}
}
});

How can I use special characters in angular directives attributes?

I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive.
For example:
<my-custom-directive my-label="Lärm" />
Another example is the ui.bootstrap.tabs directive:
<tabset>
<tab heading="Lärm"> content ... </tab>
<tab heading="Second Heading"> content ... </tab>
</tabset>
This results in a tab with heading "L�rm". Any ideas?

Usually in a good editor you can change the document encoding type, the document is saved in. try to set it to iso-8859-1/utf-8 and save/upload again.
Next bet would be to change the encoding of the html-output with
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Umlauts often is trial & error...

Use escape characters for javascript.
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody><tr>
<th>Display</th>
<th>Friendly Code</th>
<th>Numerical Code</th>
<th>Description</th>
</tr>
<tr class="grey">
<td class="codes">Ä </td>
<td class="codes">&Auml;</td>
<td class="codes">&#196;</td>
<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
<td class="codes">ä </td>
<td class="codes">&auml;</td>
<td class="codes">&#228;</td>
<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
<td>É</td>
<td>&Eacute;</td>
<td>&#201;</td>
<td>Capital E-acute</td>
</tr>
<tr>
<td>é</td>
<td>&eacute;</td>
<td>&#233;</td>
<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
<td class="codes">Ö </td>
<td class="codes">&Ouml;</td>
<td class="codes">&#214;</td>
<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
<td class="codes">ö </td>
<td class="codes">&ouml;</td>
<td class="codes">&#246;</td>
<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">Ü </td>
<td class="codes">&Uuml;</td>
<td class="codes">&#220;</td>
<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
<td class="codes">ü </td>
<td class="codes">&uuml;</td>
<td class="codes">&#252;</td>
<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">ß</td>
<td class="codes">&szlig;</td>
<td class="codes">&#223;</td>
<td class="codes">SZ ligature</td>
</tr>
<tr>
<td class="codes">«</td>
<td class="codes">&laquo;</td>
<td class="codes">&#171;</td>
<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
<td class="codes">»</td>
<td class="codes">&raquo;</td>
<td class="codes">&#187;</td>
<td class="codes">Right angle quotes</td>
</tr>
<tr>
<td class="codes">„</td>
<td class="codes"> </td>
<td class="codes">&#132;</td>
<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
<td class="codes">“</td>
<td class="codes"> </td>
<td class="codes">&#147;</td>
<td class="codes">Left quotes</td>
</tr>
<tr>
<td class="codes">”</td>
<td class="codes"> </td>
<td class="codes">&#148;</td>
<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
<td class="codes">°</td>
<td class="codes"> </td>
<td class="codes">&#176;</td>
<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
<td class="codes">€</td>
<td class="codes">&euro;</td>
<td class="codes">&#128;</td>
<td class="codes">Euro</td>
</tr>
<tr class="grey">
<td>£</td>
<td>&pound;</td>
<td>&#163;</td>
<td>Pound Sterling</td>
</tr>
</tbody></table>

Java code for selecting date from Calendar pop-up

How to select date from calendar pop up? There's a text field which is in disabled mode. When you click on the calendar icon at the corner of the text field the calendar pops up which displays the current day-1 and current day-2 days as enabled to select and rest other dates disabled. I need to select the date from the above 2 days. How do i go about doing that in selenium java?
Below is the HTML Code for Calendar:
<a href="javascript: fooCalendar.show()">
<img width="16" height="14" border="0" src="images/dynCalendar.gif"/>
</a>
<div id="dynCalendar_layer_0" class="dynCalendar" onmouseout="fooCalendar._mouseover(false)"
onmouseover="fooCalendar._mouseover(true)" style="visibility: visible; top: 367px; left: 216px;">
<table width="219" border="0" bgcolor="#DBE7F4">
<tbody>
<tr>
<td width="219" colspan="7">
</tr>
<tr>
<td class="dynCalendar_dayname" width="27">Sun</td>
<td class="dynCalendar_dayname" width="27">Mon</td>
<td class="dynCalendar_dayname" width="27">Tue</td>
<td class="dynCalendar_dayname" width="27">Wed</td>
<td class="dynCalendar_dayname" width="27">Thu</td>
<td class="dynCalendar_dayname" width="27">Fri</td>
<td class="dynCalendar_dayname" width="27">Sat</td>
</tr>
<tr>
<td/>
<td/>
<td/>
<td/>
<td class="dynCalendar_disabled" align="center">1</td>
<td class="dynCalendar_disabled" align="center">2</td>
<td class="dynCalendar_disabled" align="center">3</td>
</tr>
<tr>
<td class="dynCalendar_disabled" align="center">4</td>
<td class="dynCalendar_disabled" align="center">5</td>
<td class="dynCalendar_disabled" align="center">6</td>
<td class="dynCalendar_disabled" align="center">7</td>
<td class="dynCalendar_disabled" align="center">8</td>
<td class="dynCalendar_disabled" align="center">9</td>
<td class="dynCalendar_day" align="center">
10
</td>
</tr>
<tr>
<td class="dynCalendar_day" align="center">
11
</td>
<td class="dynCalendar_today" align="center">12</td>
<td class="dynCalendar_disabled" align="center">13</td>
<td class="dynCalendar_disabled" align="center">14</td>
<td class="dynCalendar_disabled" align="center">15</td>
<td class="dynCalendar_disabled" align="center">16</td>
<td class="dynCalendar_disabled" align="center">17</td>
</tr>
<tr>
<td class="dynCalendar_disabled" align="center">18</td>
<td class="dynCalendar_disabled" align="center">19</td>
<td class="dynCalendar_disabled" align="center">20</td>
<td class="dynCalendar_disabled" align="center">21</td>
<td class="dynCalendar_disabled" align="center">22</td>
<td class="dynCalendar_disabled" align="center">23</td>
<td class="dynCalendar_disabled" align="center">24</td>
</tr>
<tr>
<td class="dynCalendar_disabled" align="center">25</td>
<td class="dynCalendar_disabled" align="center">26</td>
<td class="dynCalendar_disabled" align="center">27</td>
<td class="dynCalendar_disabled" align="center">28</td>
<td class="dynCalendar_disabled" align="center">29</td>
<td class="dynCalendar_disabled" align="center">30</td>
<td class="dynCalendar_disabled" align="center">31</td>
</tr>
</tbody>
</table>
<table width="219" cellspacing="0" cellpadding="0" border="0">
<tbody>
</table>
</div>

How to show 6 more rows and hide the previous 5 rows of a table using javascript?

I want to only display the first 6 rows of the table and when I press a button, the previous six will be hidden and the next six will be shown.
Here is my javascript that shows the first 6 tables:
function setInnerHTML(){
<%
ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
if(userBoxList.size()>6){%>
document.getElementById('down').disabled = false;
document.getElementById('page').value = counter + 1;
<% size = 6;
}
else{
size = userBoxList.size();
}
for(x=0; x < size; x++)
{
UserBox box = (UserBox) userBoxList.get(x); %>
document.getElementById(origID).onclick = changeColor;
var items = document.getElementById(origID).getElementsByTagName("td");
items[0].innerHTML = "<%=box.getInfo().getBoxNumber()%>";
items[1].innerHTML = "<%=box.getInfo().getBoxName()%>";
items[2].innerHTML = "<%=box.getInfo().getOwnerUserName()%>";
items[3].innerHTML = "<%=box.getInfo().getCurrentSize()%>" + "MB";
origID++;
<%}
%>
}
My HTML code:
<tr style="height:40px;" bgcolor="#FFFFFF" id="0">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="1">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="2">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="3">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="4">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="5">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>

It's not good practice to mix logic with view. Try to use already existing components to display table.
You could choose displayTag: http://www.displaytag.org/1.2/ or datatables https://datatables.net/ or many others.
Use server side processing with ajax call to display next records.

I solved this problem by creating the table dynamically just using
> document.getElementById.style.display = "table-row" and
> document.getElementById.style.display = "none"
to hide and show the TR.

compare two html tables data line by line and highlight using jquery

I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>

I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}

Categories

Resources