How to define $(this) correctly in html tables - javascript

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>

Related

How to bind multiple event in jQuery

I tried to bind multiple events in jQuery.
For example in the below snippet, I defined 2 functions and they are used in eventhander.
I tried this code but didn't work well.
I would like to know where must be fixed.
If someone has opinion please let me know.
Thanks
function outpatient(elm) {
elm.removeClass().addClass(style1);
}
function hover(elm) {
elm.addClass(style2);
}
$("#calendar .day").on("click hover", function(event) {
if (event.type == "click") {
outpatient($(this))
} else {
hover($(this))
}
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
.style1 {
background-color: red;
}
.style2 {
background-color: aqua;
}
<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>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</td>
</tr>
</table>
</div>
Listen for the mouseenter event instead, there's no such thing as a hover event:
function outpatient(elm) {
elm.removeClass().addClass('style1');
}
function hover(elm) {
elm.addClass('style2');
}
$("#calendar .day").on("click mouseenter", function(event) {
if (event.type == "click") {
outpatient($(this))
} else {
hover($(this))
}
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
.style1 {
background-color: red;
}
.style2 {
background-color: aqua;
}
<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>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</td>
</tr>
</table>
</div>
You can simplify your code a little by passing an object with the events you want to listen for as the keys, and their associated functions you want to execute when called. You can use $(this) to reference the element triggering the event in your functions:
function outpatient() {
$(this).removeClass().addClass('style1');
}
function hover() {
$(this).addClass('style2');
}
$("#calendar .day").on({
mouseenter: hover, /* mouseover or mouseenter for hover */
click: outpatient
});
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
.style1 {
background-color: red;
}
.style2 {
background-color: aqua;
}
<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>
<td id=4 class=day>4</td>
<td id=5 class=day>5</td>
<td id=6 class=day>6</td>
<td id=7 class=day>7</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>

How to delete and object from an array

How can I delete an object from an array.?
I have created an array and each element of this array contain one object. Also, the array has been associated to a HTML table. How can I create a function where if I click on a delete button in one row of the table it will delete that specific row but also delete that specific object in the array.
You need two removers one that will remove the tr element from the table and another that will remove the object from the array. You could find the element from the target using the clicked element and then remove it from its parent node using removeChild. Finally, you could use splice to remove the object from the array.
Please check this implementation.
var array = [];
var rowButtons = document.querySelectorAll('td > div');
rowButtons.forEach(function(button) {
var object = {
id: button.id.split('_')[1],
name: button.id
};
array.push(object);
button.addEventListener('click', function() {
var index = this.id.split('_')[1];
console.log(index);
if (index > -1) {
var trNode = this.parentNode.parentNode;
if (trNode.nodeName && trNode.nodeName === 'TR') {
trNode.parentNode.removeChild(trNode); // remove from table
}
array.splice(index, 1); //remove from array
}
});
});
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
border-color: #aabcfe;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #aabcfe;
color: #669;
background-color: #e8edff;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #aabcfe;
color: #039;
background-color: #b9c9fe;
}
.tg .tg-jb4r {
background-color: #c0c0c0;
color: #333333;
text-align: center;
vertical-align: top
}
.tg .tg-n1xd {
background-color: #efefef;
color: #333333;
vertical-align: top
}
.tg .tg-yjn3 {
background-color: #ffffff;
color: #333333;
vertical-align: top
}
.tg .tg-ggmw {
background-color: #efefef;
color: #333333;
text-align: right;
vertical-align: top
}
.tg .tg-kybs {
background-color: #ffffff;
color: #333333;
text-align: right;
vertical-align: top
}
</style>
<table class="tg">
<tr>
<th class="tg-jb4r">No</td>
<th class="tg-jb4r">Competition</td>
<th class="tg-jb4r">John</td>
<th class="tg-jb4r">Adam</td>
<th class="tg-jb4r">Robert</td>
<th class="tg-jb4r">Paul</td>
<th class="tg-jb4r">Action</td>
</tr>
<tr>
<td class="tg-n1xd">1</td>
<td class="tg-n1xd">Swimming</td>
<td class="tg-ggmw">1:30</td>
<td class="tg-ggmw">2:05</td>
<td class="tg-ggmw">1:15</td>
<td class="tg-ggmw">1:41</td>
<td class="tg-ggmw">
<div id="tr_0">Delete</div>
</td>
</tr>
<tr>
<td class="tg-yjn3">2</td>
<td class="tg-yjn3">Running</td>
<td class="tg-kybs">15:30</td>
<td class="tg-kybs">14:10</td>
<td class="tg-kybs">15:45</td>
<td class="tg-kybs">16:00</td>
<td class="tg-kybs">
<div id="tr_1">Delete</div>
</td>
</tr>
<tr>
<td class="tg-n1xd">3</td>
<td class="tg-n1xd">Shooting</td>
<td class="tg-ggmw">70%</td>
<td class="tg-ggmw">55%</td>
<td class="tg-ggmw">90%</td>
<td class="tg-ggmw">88%</td>
<td class="tg-ggmw">
<div id="tr_2">Delete</div>
</td>
</tr>
</table>
You could use splice to remove an item from an array. You could then hide the element in the table or get that element from the target per the button or click. Finally, you could make a DELETE request to the backend if you have one.
Use splice
$.each(someArray, function(i){
if(someArray[i].name === 'Sample') {
someArray.splice(i,1);
return false;
}
});
or use JQuery.grep
someArray = jQuery.grep(someArray , function (value) {
return value.name != 'Sample';
});
or filter
var filtered = someArray.filter(function(el) { return el.Name != "Sample"; });

Categories