How to remove class by hovering - javascript

I would like to set classaqua by hovering from clicked cells.
I attempt to getfirst id and then change class to hovering cells
But, I stacked removeclasswhen hovering,
My desired result is to change class fromfirstto last hoveredcells.
Are there any method for them?
Thanks
var first;
$(function() {
$("td").click(function() {
first = this.id;
$(this).addClass("aqua");
console.log(first);
});
$('td').hover(function() {
const id = +$(this).attr('id');
console.log(id);
for(var j=first;j<=id;j++){
$("#"+id).addClass("aqua");}
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
<td id="10">10</td>
</table>

You should declare the variable first outside of the click handler function. You also should convert the string id to number:
const id = Number($(this).attr('id'));
$(function() {
var first;
$("td").click(function() {
first = this.id;
$(this).addClass("aqua");
console.log(first);
});
$('td').hover(function() {
const id = Number($(this).attr('id'));
console.log(id);
for(var j = first;j <= id; j++){
$("#"+id).addClass("aqua");
}
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
<td id="10">10</td>
</table>

THere are a bunch of ways to do this. But i tried to change your initial code as little as i could.
First, you need to convert the id ( which are strings ) to numbers. You can do that with parseInt. Because comparing 2 strings is not correct in this situation. Because '2'<'10' will return false. String comparison happens on character basis. Which mean each character is compared with the corresponding character from the other string.
So '2' is greater > than '10' because '2' > '1' in alphabetical order.
Second, You should remove the aqua class from all td when clicking again on a td.
Third, you do not need a loop. Just check if the current hovered td id is greater than the one you first clicked then add class.
$(function() {
$("td").click(function() {
const first = parseInt(this.id, 10);
$(this).addClass("aqua");
const notThisTd = $('td').not(this)
notThisTd.removeClass("aqua");
notThisTd.hover(function() {
const id = parseInt(this.id, 10);
if (id > first) {
$(this).addClass("aqua");
}
});
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
<td id="10">10</td>
</table>

Related

how to send a value from a tag except input to a function?

hi I had a question that how can I send a value from a tag except for inputs ! to a javascript function
for getting identified ...
for example, I want to click on a tr tag in table (on screen) then send a value or name or something like that to a function then function starts identifying tag value or data ... for example if tag name or tag data or tag value was "tag1" it runs a function.
I searched before and saw many people use data-id but I don't know is it workable for me or not ...
then how can I use it.
<html>
<head>
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td data-id = "td1" id = "td1" >
</td>
<td id = "td2" >
</td>
<td id = "td3" >
</td>
</tr>
<tr>
<td id = "td4" >
</td>
<td id = "td5" >
</td>
<td id = "td6" >
</td>
</tr>
<tr>
<td id = "td7" >
</td>
<td id = "td8" >
</td>
<td id = "td9" >
</td>
</tr>
</table>
<script>
function clicked(){
let x = document.getElementById("td1").getAttribute("onclick")
}
</script>
</body>
</html>
here is the css code :
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
I give you an example for your reference:
let allTrs = document.getElementsByTagName('tr');
for (let i =0;i<allTrs.length;i++){
allTrs[i].addEventListener("click",()=>{hello(allTrs[i])});
}
function hello(row){
let cellList=row.cells;
for (let i=0;i<cellList.length;i++){
console.log("id="+cellList[i].id);
console.log("data-id="+cellList[i].getAttribute('data-id'));
console.log("text content="+cellList[i].textContent);
console.log("=======================================");
}
}
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
<table>
<tr>
<td data-id="td1" id="td1">
1
</td>
<td id="td2">
2
</td>
<td id="td3">
3
</td>
</tr>
<tr>
<td id="td4">
4
</td>
<td id="td5">
5
</td>
<td id="td6">
6
</td>
</tr>
<tr>
<td id="td7">
7
</td>
<td id="td8">
8
</td>
<td id="td9">
9
</td>
</tr>
</table>

How to cancel previous input in html tables

In samples,I can change color by clicking each cells.
I would like to cancel previous inputby clicking cancel button.
Are there any way to do this? If someone has expererienced such issue. please let me know.
Thanks
$(function() {
$("td").click(function() {
$(this).addClass("red");
});
});
.red{
background-color: red;
}
td {
padding: 5px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
<td id="10">10</td>
</table>
<button>cancel</button>
Here you go:
$(function() {
let clicked = [];
$("td").click(function() {
let clickedID = $(this).attr('id');
clicked.push(clickedID);
$(this).addClass("red");
});
$("#btnCancel").on('click',() => {
if(clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).removeClass("red");
}
})
});
.red{
background-color: red;
}
td {
padding: 5px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<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>
<td id="10">10</td>
</table>
<button id="btnCancel">cancel</button>
var lastel = null;
$(function() {
$("td").click(function() {
$(this).addClass("red");
lastel = $(this);
});
$('button').click(function() {
if (lastel !== null)
lastel.removeClass('red');
});
});
You can do this by keeping track of the history:
const history = [];
function addToHistory(e) {
const index = e.target.id;
if (history.indexOf(index) < 0) history.push(index);
color();
}
function undo() {
history.pop();
color();
}
function color() {
const cells = document.getElementsByTagName("td");
for (let i = 0; i < cells.length; i++) {
cells[i].classList.remove("red");
}
history.forEach(index => {
document.getElementById(index).className = "red";
});
}
.red{
background-color: red;
}
td {
padding: 5px
}
<table>
<td onclick="addToHistory(event)" id="1">1</td>
<td onclick="addToHistory(event)" id="2">2</td>
<td onclick="addToHistory(event)" id="3">3</td>
<td onclick="addToHistory(event)" id="4">4</td>
<td onclick="addToHistory(event)" id="5">5</td>
<td onclick="addToHistory(event)" id="6">6</td>
<td onclick="addToHistory(event)" id="7">7</td>
<td onclick="addToHistory(event)" id="8">8</td>
<td onclick="addToHistory(event)" id="9">9</td>
<td onclick="addToHistory(event)" id="10">10</td>
</table>
<button onclick="undo()">cancel</button>

How to change classes like schedule in html calendar tables

I have calendar like html tables.like
<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>
I would like to change its classes like calendar schedule, if I clicked cell2,forward 3day's classes are changed.(I attached images)
①Are there any good way to realize it?
②Are there any other ways to realize schedule like expression(result image is illustrated below),
except for like applying border-bottom options ?
My current attempt is like below.....
.outpatient {
border-bottom: 3px solid yellow;
}
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
image is like below.
Thanks
You can try using .nextAll()
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
and :lt() selector:
Select all elements at an index less than index within the matched set.
Demo:
$(function() {
$("td").click(function() {
$('td').removeClass('outpatient'); //If you want to reset in each click
$(this).nextAll(':lt(3)').addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.outpatient {
border-bottom: 3px solid yellow;
}
<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>

css - highlight td elements after finding row

I am trying to highlight some td elements after find the row.
I managed to find the row and td elements in two different steps (commented 'Works OK'). I would like to combine the two steps in a inside a for loop but It is not working.
$(document).ready(function() {
var dt = ['2017-11-02', '2017-11-03'];
cell = $('td:contains("value1")');
// works OK
$(cell).css({
color: "red",
border: "2px solid red"
});
for (var i = 0; i < dt.length; i++) {
// works OK
$('[data-date="' + dt[i] + '"]').css({
background: "blue",
color: "white"
});
// Not Working
//$('td:contains("value1")').find('[data-date="' + dt[i] + '"]').css({background:"blue", color:"white"});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>text1</td>
<td>value1</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
<tr>
<td>text2</td>
<td>value2</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
</div>
Regards,
Elio Fernandes
you can replace
$('[data-date="' + dt[i] + '"]').css({
with
$(cell).parent().children('[data-date="' + dt[i] + '"]').css({
you can replace children with find, and replace $(cell).parent() by a different way to focus on the tr.
$(document).ready(function() {
var dt = ['2017-11-02', '2017-11-03'];
cell = $('td:contains("value1")');
// works OK
$(cell).css({
color: "red",
border: "2px solid red"
});
for (var i = 0; i < dt.length; i++) {
// works OK
$(cell).parent().children('[data-date="' + dt[i] + '"]').css({
background: "blue",
color: "white"
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>text1</td>
<td>value1</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
<tr>
<td>text2</td>
<td>value2</td>
<td data-date="2017-11-01">1</td>
<td data-date="2017-11-02">2</td>
<td data-date="2017-11-03">3</td>
<td data-date="2017-11-04">4</td>
</tr>
</div>

Jquery Javascript function, simple error, can't find it!

When my page loads it calls the function like below:
<body onLoad='changeTDNodes()'>
And the code it calls is below:
enter code here
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script>
function changeTDNodes() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});
}
I have the class setup correctly in CSS
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
But no classes are being changed, whats going on?
Thanks for all your help!
Below is whole page:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Livermore Readerboard</title>
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script>
$(function() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});
</script>
<style type='text/css'>
#InnerRight {
width: 50% !important;
position: relative !important;
float: left !important;
}
#InnerLeft {
width: 49% !important;
position: relative !important;
float: right !important;
}
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
</style>
</head>
<body>
<div id='InnerLeft'>
<table border=1 cellpading=1 cellspacing=0>
<tr align=right>
<td align=left><b>Split/Skill</b></td>
<td align=center><B>CIQ</b></td>
<td align=center><b>EWT</b></td>
<td align=center><b>Agents Staffed</b></td>
<td align=center><b>Avail</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_video</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_tier</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_video</b></td>
<td align=center class='threshold'><B>60</b></td>
<td align=center><b>10:12</b></td>
<td align=center><b>58</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hsi</b></td>
<td align=center class='threshold'><B>34</b></td>
<td align=center><b>18:15</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hn</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>3:48</b></td>
<td align=center><b>3</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_cdv</b></td>
<td align=center class='threshold'><B>6</b></td>
<td align=center><b>14:53</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>CommOps FieldCare</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
</tr>
</table>
</div>
</body>
</html>
You would be far better off, if possible, using ids on your elements, and then using document.getElementById() (or, better yet, using Dojo, MooTools or JQuery to make your code simpler).
So your html looks like:
<td id="cell-repair-video">Repair value is <b>23</b></td>
<td id="cell-ppv">PPV value is <b>5</b></td>
Then your JavaScript looks like:
var RepairVideo_cell = document.getElementById("cell-repair-video");
var RepairVideo_value = RepairVideo_cell.getElementsByTagName("b")[0];
In JQuery (and others), you can easily use a class to determine which elements need thresholding
In this case, your html looks like:
<td class="threshold">Repair value is <b>23</b></td>
<td class="threshold">PPV value is <b>5</b></td>
And your entire JavaScript looks like:
$(function() {
var threshValue = 10;
$('.threshold').each(function(index) {
var thisValue = parseFloat( $('b', this).text() );
if(thisValue > threshValue) {
$(this).addClass('overThreshold');
}
});
});
In your current example, there is an error in your CSS
To style td and th elements with a classname, go
td.overThreshold, th.overThreshold {
background: #F00; /* for example */
}
Presumably you are passing through something to the applyThresholds function where innerHTML on myvalue is not valid. Does it work ok in firefox etc?
My guess would be that the crazy document.getElementsByTagName('B')[36]; code is just returning undefined at some point. You should put some code in applyThresholds to check to see if you are getting invalid arguments through. Something like:
if(myvalue == null || mycell == null) {
return;
}

Categories