How can I use special characters in angular directives attributes? - javascript

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>

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>

Uncaught TypeError: Cannot read property 'name' of undefined at tableToJson

I am having a template file which I am trying to convert into pdf. After googling a bit I found a framework called JSPDf. When I am trying to use it it gives me error Uncaught TypeError: Cannot read property 'name' of undefined jspdf.
we have two button 1->printDiv this one is working fine.
2->saveDiv this button having issue.when we are pressing this button to download pdf
i get console error like Uncaught TypeError: Cannot read property 'name' of undefined at tableToJson(jspdf.debug.js).
Here is My Code i put all code in single file.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script>
var doc = new jsPDF();
function saveDiv(divId, title) {
doc.fromHTML(`<html><head><title>${title}</title></head><body>` + document.getElementById(divId).innerHTML + `</body></html>`);
doc.save('div.pdf');
}
function printDiv(divId,
title) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
</script>
<style>
tbody {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<p> </p>
<div id="pdf">
<p>
<font size="6" color="black"></font>
<table border="1" width="600">
<tbody>
<tr>
<td width="96">
<p><strong>PROJECT TITLE</strong></p>
</td>
<td colspan="3" width="225">
<p>HYATT CENTRIC KOTA KINABALU</p>
<p><Project N ame></p>
</td>
<td colspan="3" width="97">
<p><strong>PROJ.NO</strong></p>
</td>
<td colspan="2" width="182">
<p>HCKK1904</p>
<p><Project code></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>LOCATION</strong></p>
</td>
<td colspan="8" width="504">
<p>Lot 017512533 Along Jalan Haji Saman, 88000 Kota Kinabalu, Sabah.</p>
<p><Location></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>NO</strong></p>
</td>
<td colspan="3" width="225">
<p>RFI-001 <operation prefix -in sequence no></p>
</td>
<td colspan="2" width="96">
<p><strong>DATE</strong></p>
</td>
<td colspan="3" width="183">
<p>23/1/2020</p>
<p><Created date></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>TITLE</strong></p>
</td>
<td colspan="8" width="504">
<p>HCKK Blueprint Document</p>
<p><user entered title of operation title field></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>ASSIGNED TO</strong></p>
</td>
<td colspan="4" width="227">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><Assign To></p>
</td>
<td width="94">
<p><strong>PURPOSE</strong></p>
</td>
<td colspan="3" width="183">
<p>Approval</p>
<p><purpose></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>CC USERS</strong></p>
</td>
<td colspan="3" width="225">
<p>Chirs Chiew (Sunhill Ventures Sdn Bhd)<br /> Roy Chiew (Sunhill Ventures Sdn Bhd)</p>
<p><Cc user name’s></p>
</td>
<td colspan="2" width="96">
<p><strong>REQUESTED BY</strong></p>
</td>
<td colspan="3" width="183">
<p>Manfred weber</p>
<p>(Sunhill Ventures Sdn Bhd)</p>
<p><Created by name></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>DISCIPLINE</strong></p>
</td>
<td colspan="3" width="225">
<p>Architecture</p>
<p><User selected discipline ></p>
</td>
<td colspan="2" width="96">
<p><strong>DUE DATE:</strong></p>
</td>
<td colspan="3" width="183">
<p>25/1/2020</p>
<p><Action by></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>DESCRIPTION</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Sending the blueprint of the hckk1904 document for approval</p>
<p><Initiator description></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>RESPONDANT COMMENT</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Approving the blueprint document<strong> DATE:</strong></p>
<p><strong><< the assignee comments ></strong></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>LEAD RESPONDANT</strong></p>
</td>
<td width="122">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><strong><Assignee></strong></p>
</td>
<td width="98">
<p><strong>RESPONSE</strong></p>
</td>
<td colspan="3" width="97">
<p>Approved</p>
<p><Assignee status></p>
</td>
<td width="97">
<p><strong>RESPONDED DATE</strong></p>
</td>
<td width="85">
<p>23/1/2020</p>
<p><Assignee edited on></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>DOCUMENTS ATTACHED</strong></p>
</td>
<td colspan="7" width="499">
<p>Filename.pdf</p>
<p><file attachment names of the Created by / Assignee></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>This is a system generated document, no signature is required.</p>
</p>
</div>
</body>
<button onclick="printDiv('pdf','New Operations Details')">print div</button>
<button onclick="saveDiv('pdf','New Operations Details')">save div as pdf</button>
</html>
please help me..

fromHTML() is no longer being maintained from jsPDF. As the author himself said:
https://github.com/MrRio/jsPDF/issues/2268#issuecomment-460108597

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

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>

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