jQuery toggle table row on click on a specific td - javascript

So, i have a table with some hidden rows with class="mov" that I would like to toggle when you click on a specific td with id="line" or class="line".
<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9">
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
</table>
And here's the jQuery function:
$(function() {
$('tr.sinaledit').click(function(){
$(this).siblings('.mov'+this.id).toggle('slow');
});
$('tr[class^=mov]').hide().children('td');
});
It works, but it toggles the rows when you click on any td, even the x one. The x td will have another delete function associated with it, that's why I don't want it do be part of the toggle. But I can't manage to make the toggle when you click only on id="line". Sorry, I'm a jQuery beginner.
Here's a fiddle for demo:
jsFiddle
Thank you very much!


you have simply to attach the click event on the required element.In your case the element has the id line so you have to use the # selector to select this element:
$(function() {
$('#line').click(function(){
$('tr.sinaledit').siblings('.mov').toggle('slow');
});
$('tr[class^=mov]').hide().children('td');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table align="center" id="editabletable" class="table" cellpadding="5" cellspacing="3" border="1">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9">
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
<tr class="mov">
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center"> </td>
</tr>
</table>


It's really just a matter of how you use your selectors. I chose to only apply the click event on anything with the '.line' class instead.
Made some changes but see the jsFiddle
$(function() {
$('.line').on('click', function(){
// Find the nearest element with .line class
// Once found, move up to the parent <tr> to find siblings
// Note: this only works with your current structure
$(this).closest('.line').parent().siblings('.mov').toggle();
});
$('tr[class^=mov]').hide().children('td');
});


For the html structure I like more this
<style>
.mov {
display: none;
}
</style>
<table align="center" id="editabletable">
<tr>
<td id="add">+</td>
<td id="remove">x</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
</table>
For the jquery part, this is more simple:
$(function() {
$('#add').click(function(){
$('.mov').show('slow');
});
$('#remove').click(function(){
$('.mov').hide('slow');
});
});


Try,
$(function() {
$('.sinaledit').click(function(){
$('.mov').toggle('slow');
});
$('tr[class^=mov]').hide().children('td');
});
This will help fixing your need.


There is no </tr> tag corresponding to the <tr class="sinaledit"> tag so the browser is applying the behavior to all td tags. Try the following:
<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9">
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td></tr>
<tr><td align="center" id="x" class="x">x</td></tr>
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center"> </td>
</tr>
</table>
There are other style edits I would make to make the html easier to follow, but the above is the bare minimum you need to get the desired functionality.
updated jsfiddle


jsFiddle
You cannot sibling <tr> and <td>, TD should always be child of TR.
It's good to avoid "+" as ID name selector.
If you plan to have multiple buttons - simply remove all of your ID and rely on CLASSes.
Here's an example with even multiple tables:
$(function() {
$('.table').on("click", ".line", function(){
$(this).siblings('.mov').toggle(800);
}).on("click", ".delete", function(){
$(this).closest("table").fadeOut(function(){
$(this)/*the table*/.remove();
});
});
});
.line:hover {
background-color:#cf5;
cursor: pointer;
}
.table {
margin: 0 auto;
width:100%;
border-collapse: collapse;
table-layout:fixed;
}
.table td,
.table th{
padding:5px 10px;
border:1px solid #444;
}
.table tr.mov{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr class="line">
<td class="show">+</td>
<td>1 text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="delete">x</td>
</tr>
<tr class="mov">
<td> </td>
<td>Card</td>
<td>Type</td>
<td>Code</td>
<td>Desc</td>
<td>P1</td>
<td>P2</td>
<td>P3</td>
<td>P4</td>
<td>P5</td>
<td> </td>
</tr>
<tr class="mov">
<td> </td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td> </td>
</tr>
</table>
<table class="table">
<tr class="line">
<td class="show">+</td>
<td>2 text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="delete">x</td>
</tr>
<tr class="mov">
<td> </td>
<td>Card</td>
<td>Type</td>
<td>Code</td>
<td>Desc</td>
<td>P1</td>
<td>P2</td>
<td>P3</td>
<td>P4</td>
<td>P5</td>
<td> </td>
</tr>
<tr class="mov">
<td> </td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td> </td>
</tr>
</table>

Related

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

Moving specific tr's into a specific td with javascript

I'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen

You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer

Input check that user entered a value between 0-9 Javascript

I am working on implementing a Sudoku puzzle.
The first step I am taking is trying to validate that what the user is inputing is a value between 0-9.
But I'm stuck with the syntax and how to tackle this problem.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td>4</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td>5</td>
<td contentEditable="true" class="sudEnter"></td>
<td>3</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>7</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>2</td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>6</td>
<td contentEditable="true" class="sudEnter"></td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>2</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>9</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td contentEditable="true" class="sudEnter"></td>
<td>8</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td>1</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>6</td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="goldBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>8</td>
<td contentEditable="true"></td>
<td>1</td>
</tr>
</table>
</td>
<td colspan="3" rowspan="3" class="greenBox">
<table class="subTable">
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
<tr>
<td>7</td>
<td contentEditable="true" class="sudEnter"></td>
<td contentEditable="true" class="sudEnter"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
</table>
That's my Sudoku in html and here is the JS I have at the moment:
function inputCheck() {
var userInput = ""
userInput = document.getElementsByClassName("sudEnter");
if (userInput > 0) {
userInput === userInput;
} else if (userInput < 9) {
userInput === userInput;
} else {
document.getElementsByClassName("sudEnter").value = "";
}
}
document.addEventListener("keyup", inputCheck);

In your if you are using === which is used to compare variables. You are basically comparing userInput to userInput. Just use one = though you don't have to do anything at all for that if.

Try substituting input type="number" element with min attribute set to 0 , max attribute set to 9 for td element
$("input").change(function() {
if (this.value > this.max) {
this.value = this.max
}
if (this.value < this.min) {
this.value = this.min
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="number" min="0" max="9" value="0" />

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>

Categories

Resources