We Keep Coding

How to remove class by hovering

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>

Change td background colour based on the value

I am using google table charts,value where the data is like :
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
So the table value keeps on incrementing, that means, tr and td keeps increasing based on test executions and number of testcases.
So What I like to make a change is if the td value is Pass, the background colour should be green and if its fail, it should be red.
i tried like
var table1 = document.getElementsByClassName('google-visualization-table-td');
var key = table1.value;
for (key in table1) {
if(key != "Pass"){
key.bgColor='#800000';
}
};
But no luck !!
How its possible. Please help.

So as a caveat to doing it via the javascript way, you're already adding a style tag to each cell that will re-eval and paint each independently as you're say for example adding new rows etc that would also involve firing off that method each time.
Another option to consider is a css selector that doesn't need to be refired, and will handle the issue while not adding a new style tag to each cell which becomes something like an added attribute of data-whatever="<value>" vs style="background-color: <colorThatWillBeConvertedToRGBAutomatically>" to each cell.
So just a no js option;
// Nope.
[data-tag=Pass] {
background-color: green;
}
[data-tag=Fail] {
background-color: red;
}
<table>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td" data-tag="TC-206">TC-206</td>
<td class="google-visualization-table-td" data-tag="Customer logs in">Customer logs in</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td" data-tag="TC-207">TC-207</td>
<td class="google-visualization-table-td" data-tag="Customer signs out">Customer signs out</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Fail">Fail</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td>
<td class="google-visualization-table-td" data-tag="Pass">Pass</td></tr>
</table>

You are not using the right for loop.
Take a look at this documentation (MDN).
Also, using element.value will return the value of the attribute value, not the text content.
The following code should do the trick.
var elements = document.getElementsByClassName('google-visualization-table-td');
for (var i = 0; i < elements.length; i++) {
var value = elements[i].innerText || elements[i].textContent;
if (value === 'Fail') {
elements[i].style.backgroundColor = '#FF0000';
} else if (value === 'Pass') {
elements[i].style.backgroundColor = '#00FF00';
}
}
td {
display: block;
border: solid 1px #CCC;
}
<table>
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
</table>

You can add a listener if user can add or remove items in the table or if yourself manage table you can just add this code to your managing functions like adding or removing:-
var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
if(x[i].innerText === 'Pass')
x[i].style.backgroundColor = "green";
else if(x[i].innerText === 'Fail')
x[i].style.backgroundColor = "red";
}

.forEach your HTMLTable.rows
.forEach your HTMLRow.cells
Get each cell content cell.textContent.trim().toLowerCase()
If the content is either pass|fail add a is-[pass|fail] classname
[...document.getElementById("google-visualization").rows].forEach( row =>
[...row.cells].forEach( cell => {
const cont = cell.textContent.trim().toLowerCase();
if (/^(pass|fail)$/.test(cont)) {
cell.classList.add(`is-${cont}`);
}
})
);
.is-pass{background: green;}
.is-fail{background: red;}
<table id="google-visualization">
<tr class="google-visualization-table-tr-even">
<td class="google-visualization-table-td">TC-206</td>
<td class="google-visualization-table-td">Customer logs in</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
<tr class="google-visualization-table-tr-odd">
<td class="google-visualization-table-td">TC-207</td>
<td class="google-visualization-table-td">Customer signs out</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Fail</td>
<td class="google-visualization-table-td">Pass</td>
<td class="google-visualization-table-td">Pass</td>
</tr>
</table>
Clearly the best way would be to assign a class fail or pass at elements creation and style using CSS, instead of using JS loops.

how to get data from tag of html

I have this HTML snippet here:
<tr class="newRow">
<td class="doc" ids="1">ABC</td>
<td class="doc" ids="2">EFG</td>
<td class="doc" ids="1">ABC</td>
<td class="doc" ids="3">HIJ</td>
</tr>
And here is my script:
var formDoc = $.map($('.doc'), function(e) {
return e.attr("ids");
});
alert(formDoc);
It only returns empty. Could you give me an advise to solve my issue?

change
return e.attr("ids");
to
return e.getAttribute("ids");

e is an element from your nodeList and doesn't have jquery attr method which works on elements retrieved using jQuery selectors. So, you have to use $(e).attr("ids").
var formDoc=$.map($('td'),function(e) {
return $(e).attr('ids');
});
console.log(formDoc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="newRow">
<td class="doc" ids="1">ABC</td>
<td class="doc" ids="2">EFG</td>
<td class="doc" ids="1">ABC</td>
<td class="doc" ids="3">HIJ</td>
</tr>
</table>

Check this out working code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr class="newRow">
<td class="doc" ids="1">ABC</td>
<td class="doc" ids="2">EFG</td>
<td class="doc" ids="1">ABC</td>
<td class="doc" ids="3">HIJ</td>
</tr>
</table>
<script>
var formDoc = $.map($('.doc'), function(e) {
return e.getAttribute('ids');
});
alert(formDoc);
</script>
</body>
</html>

Change the TD value inside a particular Div Tag inside using jQuery

I have the following HTML Table,
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="totalone">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount"><div id="discountid"><input type="text" name="disco" class="dis"/></div> </td>
</tr>
<tr class="tax_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">tax</td>
<td class="total-value" id="tax"><div id="tax">00</div></td>
</tr>
</table>
When i click on the button with id Discount, I need to change the value to the TD inside the div Tag with id "total" and set its value to another JavaScript variable?I tried the following, but it's not working.
$(".discountbtn").click(function(){
var test=$("#items #disc .dis").val(); //Easiest method
console.log("lol");
console.log(test);
var tot = roundNumber(test,2);
var new_tot=window.finale-tot;
console.log(window.finale);
console.log(new_tot);
$('#items #totalone').html("$"+new_tot);
//alert("button");
});

Try with my code that help you
change HTML <div id="totalone">$875.00</div> to $<span id="totalone">875.00</span>
$(document).ready(function() {
$("#discountbtn").click(function(){
var test=$("#items #disc .dis").val();
console.log(test);
var oldTotal = $("#totalone").text();
console.log(oldTotal);
var tot = Math.round(test * 100) / 100;
var new_tot=parseFloat(oldTotal)-tot;
console.log(new_tot);
$('#items #total').html(new_tot); //It was a jQuery selector glitch.
});
});

$('#items #totalone').html("$"+new_tot);

Calculating Number IDs

I wasn't quite sure how to word this in the title, so thank you for clicking to on this.
So now to my problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.block {
background-color: black;
}
</style>
<table border='1px'>
<tr>
<td id='11'></td>
<td id='12'></td>
<td id='13'></td>
<td id='14'></td>
<td id='15'></td>
</tr>
<tr>
<td id='21'></td>
<td id='22'></td>
<td id='23'></td>
<td id='24'></td>
<td id='25'></td>
</tr>
<tr>
<td id='31'></td>
<td id='32'></td>
<td id='33' class="block"></td>
<td id='34'></td>
<td id='35'></td>
</tr>
<tr>
<td id='41'></td>
<td id='42'></td>
<td id='43'></td>
<td id='44'></td>
<td id='45'></td>
</tr>
<tr>
<td id='51'></td>
<td id='52'></td>
<td id='53'></td>
<td id='54'></td>
<td id='55'></td>
</tr>
</table>
<button onclick="blockUp()">Up</button>
<button onclick="blockDown()">Down</button>
<button onclick="blockLeft()">Left</button>
<button onclick="blockRight()">Right</button>
<script>
var blockUp = function() {
var oldBlock = document.getElementsByClassName("block")[0].id;
var newBlock = Math.floor(oldBlock + 1);
document.getElementById(newBlock).classList.add("block");
document.getElementById(oldBlock).classList.remove("block");
}
</script>
</body>
</html>
This code is not complete, as I want to fix this problem first.
I want to use Math.floor to get a certain ID (thus, IDs as numbers), and manipulate them. More specifically, I want to find the ID of the cell that currently has the .block class, find the ID of the cell above that using Math.floor(oldBlock + 1), remove the class from the original cell, and add the class to the new cell. I used variables so that the function would always be able to run, rather than making a million if/else if/else statements.
Unfortunately, this doesn't work with my current code. How would I be able to do this?
Any help is appreciated!

You have to make sure that "oldBlock" contains a number before trying to do math with it (like adding 1):
var oldBlock = +document.getElementsByClassName("block")[0].id;
That's one way of doing it. You could also use parseInt():
var oldBlock = parseInt(document.getElementsByClassName("block")[0].id, 10);
The value of the "id" property will be a string, so if you involve that in an addition operation JavaScript will treat it as string concatenation. By forcing it to be a number first, you'll get the effect you want.