We Keep Coding

How to define $(this) correctly in html tables

When I apply each method,I confused to define this.
When I click element , I would like to get each cells id but it seems that this show entire calendar
my question is
① Why this show #calendar when I click cells ?
② How to define and get each id when I click cells?
If someone has experienced same problem, please let me know.
Thanks
var $ = jQuery;
const $days = $(this).find('.day');
function register() {
function clicked() {
alert("clicked");
$(this).toggleClass('is-clicked');
let clickedID=$(this).attr('id');
console.log("clickedID",clickedID);
}
$(this).on({
click: clicked
});
}
$("#calendar").each(register);
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
</tr>
</table>
</div>

You sre spplying each on the #calendar and it wil apply handler to that so this would refers to it always.
Instead you need to apply each on .day to iterate over cells and binding handler.
$("#calendar .day").each(register);
function register() {
function clicked() {
alert("clicked");
$(this).toggleClass('is-clicked');
let clickedID = $(this).attr('id');
console.log("clickedID", clickedID);
}
$(this).on({
click: clicked
});
}
$("#calendar .day").each(register);
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
</tr>
</table>
</div>

this is referring to the calender. Remove this and add td.
var $ = jQuery;
const $days = $(this).find('.day');
function register() {
function clicked() {
alert("clicked");
$(this).toggleClass('is-clicked');
let clickedID=$(this).attr('id');
console.log("clickedID",clickedID);
}
console.log(this)
$('td').on({ //===========> Add td instead of this
click: clicked
});
}
$("#calendar").each(register);
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td id=1 class=day>1</td>
<td id=2 class=day>2</td>
<td id=3 class=day>3</td>
</tr>
</table>
</div>

How to undo class change in html table

When I try to undo class change,I suffer some problems.
I could get clicked element, but my desired result is to get class changed element and undo it.
For example in my snippet,I would like to undo all the class change at the same time.
In other words, I would like to getclass changed element array.
Are there any method?
Thanks
let clicked=[];
$(function() {
$("td").click(function() {
$(this).nextAll(':lt(4)').addClass('color');
let clickedID=$(this).attr('id');
clicked.push(clickedID);
});
});
$(function() {
$("#btnCancel").on('click',() => {
if(clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).removeClass();
}
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.color {
background-color: hsl(60,100%,60%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=1>1</td>
<td id=2>2</td>
<td id=3>3</td>
<td id=4>4</td>
<td id=5>5</td>
<td id=6>6</td>
<td id=7>7</td>
<td id=8>8</td>
<td id=9>9</td>
</tr>
</table>
<button id="btnCancel">undo</button>

.removeClass([className]) Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$('td#${lastClicked}').nextAll(':lt(4)').removeClass('color'); would return the last selected/updated elements.
let clicked = [];
$(function() {
$("td").click(function() {
$(this).nextAll(':lt(4)').addClass('color');
let clickedID = $(this).attr('id');
clicked.push(clickedID);
});
});
$(function() {
$("#btnCancel").on('click', () => {
if (clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).nextAll(':lt(4)').removeClass('color');
}
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.color {
background-color: hsl(60, 100%, 60%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=1>1</td>
<td id=2>2</td>
<td id=3>3</td>
<td id=4>4</td>
<td id=5>5</td>
<td id=6>6</td>
<td id=7>7</td>
<td id=8>8</td>
<td id=9>9</td>
</tr>
</table>
<button id="btnCancel">undo</button>

HTML & JavaScript - Conditional formatting is not working

I am trying to create some conditional formatting using JavaScript and HTML.
Basically I have a table with the following fields:
table
system
timestamp
total_amount
amount_used
amount_free
What I want based on the value of the column amount_free to change the colour of the field.
In this case if my column amount_free is 0 € then I want to have the red colour on my cell.
For that I am using the following code:
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td>0 €</td>
</tr>
</table>
But it doesn't return any colour. Only the table without formating.
Can anyone help me?

$(document).ready(function() {
$('#table_id .amount_free_value').each(function() {
const value = $(this).text().split('€')[0];
if (value == 0) {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free_value">0 €</td>
</tr>
</table>
What you are trying to check is somehow wrong, you have the currency inside the text string. You don't have an id for the table and neither a class or some attribute on the amount_free value from the table.
You can do it in this way.

you have some typo in your code (style part), your table also miss the ID property and there's no TD with the amount_free class on it.
Try with:
<head>
<script type='text/javascript'>
$(document).ready(function(){
$('#table_id td.amount_free').each(function(){
if ($(this).text() == '0 €') {
$(this).css('background-color','#f00');
}
});
});
</script>
</head>
<br><br>
<style>
table, td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table, th {
border: 1px solid black;
}
th, td {
padding: 3px;
}
th {
text-align: left;
}
th {
background-color: #f2f2f2;
}
td{
font-family: arial;
font-size: 10pt;
}
</style>
<table style=width:100% id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>

You need to provide id for table tag and class name for your specific td tag in your example. So your html code would be like below:
<!–– add id to table ––>
<table id="table_id" style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<!–– add class to td ––>
<td class="amount_free">0 €</td>
</tr>
</table>

you are checking for a table with id table_id which doesn't exist. You are further checking a td-element with the class amount_free which also doesn't exist.
If you add ID and class then it will work.
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>

Dropdown within table (CSS/HTML/Java)

I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):

Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>

Dynamically bind check boxes and button on click using jQuery

Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.

You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});