We Keep Coding

Rotating items in a cell by clicking on it

I am trying to create a mutual exclusion toggle without using an onclick button within HTML since my HTML isn't allowed to be changed. Within my javascript I am trying to use event listeners and getting elements by tag name but nothing seems to be working. Any ideas?
window.onload(function () {
let cells = document.getElementsByTagName(`td`).item(0);
for (let cell of cells) {
cell.addEventListener(`click`, rotate);
function rotate() {
document.getElementsByTagName(`A`).item(0);
document.getElementsByTagName(`B`).item(0);
document.getElementsByTagName(`C`).item(0);
document.getElementsByTagName(`D`).item(0);
}
}
});

I created a snippet for you that adds a listener to each td and makes some function in my case I made it change the inner text of the red box
const td = document.querySelectorAll('td');
const text = document.querySelector('.clicked');
td.forEach( e => {
e.addEventListener('click', event => {
text.innerText = e.innerText;
//your function
})
});
table {
width: 90vw;
height: 50vh;
}
td {
height: 33%;
width: 33%;
border: 1px solid black;
text-align: center;
}
td:hover{
cursor: pointer;
background-color: grey;
color: white;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.clicked{
width: 80%;
height: 20%;
font-size: 18;
text-align: center;
border: 3px solid red;
padding: 2vh;
margin: 2vh;
}
<div class="flex">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<div class="clicked">TEXT</div>
</div>

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 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>

JQuery - Click to keep a div displayed [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here

one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/

You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>

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"; });