Java code for selecting date from Calendar pop-up - javascript

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>

Related

Add dynamically rowspan with Javascript/ jQuery

I am trying to add dynamically rowspan to my table, I am totally new in the programming world so I am still learning. This is my table::
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>School 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
So if I add a new student to the table, I need to adjust rowspan so I was wondering if there is a way to add that automatically when I add a new student:
For example currently, if I add a new student my table is totally messed up:
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
I know that I can adjust rowspan but I want to do this via Javascript/jQuery, can anybody try to help me with this?

This works
Add a tbody per building
Calculate the rows in each building
Plain JS
document.querySelectorAll("table tbody")
.forEach(tb => tb.querySelector(".build-name")
.setAttribute("rowspan",tb.querySelectorAll("tr").length))
document.querySelectorAll("table tbody")
.forEach(tb => tb.querySelector(".build-name")
.setAttribute("rowspan",tb.querySelectorAll("tr").length))
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>
jQuery
$("table tbody").each(function() {
$(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})
$("table tbody").each(function() {
$(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th class="text-center">Building</th>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Payable</th>
<th class="text-center">Paid Amount</th>
<th class="text-center">Due</th>
<th class="text-center">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="build-name" rowspan="3"><b>Shool 1</b></td>
<td align="center">151-15-4366</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4852</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">3000</td>
<td align="center">10000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-5355</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">3000</td>
<td align="center">15000</td>
<td align="center">True</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="build-name" rowspan="2"><b>School 2</b></td>
<td align="center">151-15-4841</td>
<td align="center">Lorem Name</td>
<td align="center">13000</td>
<td align="center">10500</td>
<td align="center">2500</td>
<td align="center">True</td>
</tr>
<tr>
<td align="center">151-15-4930</td>
<td align="center">Lorem Name</td>
<td align="center">18000</td>
<td align="center">33000</td>
<td align="center">-15000</td>
<td align="center">True</td>
</tr>
</tbody>
</table>

localstorage setitem for every block in <table>

I have this contenteditable table on my website.
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
I want to save every block with id on localstorage. I know I can use localStorage.setItem("p1d1", $('#p1d1').text()); to save these, but is there a better way to save all of these blocks without going like
localStorage.setItem("p1d1", $('#p1d1').text());
localStorage.setItem("p2d1", $('#p2d1').text());
localStorage.setItem("p3d1", $('#p3d1').text());
through the whole thing? I need to call each of them by their id later on.
Thank you.

You can use document.querySelectorAll('td[id^=p]') to select all the td that has id that startsWith p.
const tds = Array.from(document.querySelectorAll('td[id^=p]'));
tds.forEach(td => {
const id = td.id;
const text = td.innerText;
console.log(id, text);
})
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1>text of p1d1</td>
<td id="p1d2" tabindex=2>text of p1d2</td>
<td id="p1d3" tabindex=3>text of p1d3</td>
<td id="p1d4" tabindex=4>text of p1d4</td>
<td id="p1d5" tabindex=5>text of p1d5</td>
<td id="p1d6" tabindex=6>text of p1d6</td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

Personally I would store it in one key instead of tons of keys. Simple reduce statement can let you gather all of the data.
var cells = document.querySelectorAll('td[id^="p"]')
function save() {
const data = Array.from(cells).reduce(function (o, td) {
o[td.id] = td.innerHTML;
return o
}, {})
console.log(data)
//window.localStorage("data", JSON.stringify(data))
}
function loadData () {
var data = window.localStorage("data")
if (data) {
var obj = JSON.parse(data)
Object.entries(obj).forEach( function (entry) {
document.getElementById(entry[0]).innerHTML = entry[1]
})
}
}
save()
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

I would recommend adding a class to each cell:
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1 class="periodCell"></td>
<td id="p1d2" tabindex=2 class="periodCell"></td>
<td id="p1d3" tabindex=3 class="periodCell"></td>
<td id="p1d4" tabindex=4 class="periodCell"></td>
<td id="p1d5" tabindex=5 class="periodCell"></td>
<td id="p1d6" tabindex=6 class="periodCell"></td>
</tr>
Then doing something along the lines of the following:
$('.periodCell').each(function(index, elem)
{
localStorage.setItem(elem.id, elem.textContent);
});
you could do some other things with the selector so that you're not needing to add the class to every cell, but this is the most basic option...
another is regex on the cell ids... but that would be pretty painful

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>

Add click event to TH pseudo element, get data attribute from TH and prevent TH event from firing on click

I am creating an HTML table which currently has a click event attached to the column heading TH to sort the table.
What I am now trying to do is to expand a column by showing additional hidden columns when you click "somewhere".
Now, my initial thought for this "somewhere" was to create a :pseudo element on each TH which has hidden columns (they all have a specific css class) and to attach the show event on to this :pseudo element, however, when I do this its triggering the column sorting.
I have tried changing $('.xxp').on('click', function () { to $('.xxp:before').on('click', function () { but I because the TH has data attributes that I need, when I use $(this).parent('th') I am not able to get the data so the expand is not firing.... Can you target the parent of a pseudo element?
So, looking at the snippet, I want to click on the green to sort the table, I want to click on the red to show the hidden columns but not trigger the sort at the same time (which it is currently).
$(document).ready(function () {
var openData = null;
$('.xxp').on('click', function () {
var $this = $(this),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp:before {
display:inline-block;
width:15px;
height:15px;
content:"";
background-color:#ff0000;
float:right;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>
And here is a fiddle: http://jsfiddle.net/wf_4/qkv510ot/

Ok, thanks to the suggestion from #bergi this is how I did it.
$(document).ready(function () {
var pseudoBtn = $('<span />').attr({ 'class': 'pseudoBtn' });
$('.xxp').prepend(pseudoBtn);
var openData = null;
$('.xxp span.pseudoBtn').on('click', function (e) {
e.stopPropagation();
var $this = $(this).parent('th'),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp > span.pseudoBtn {
display:inline-block;
width:15px;
height:15px;
background-color:#ff0000;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>

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