We Keep Coding

How to highlight table rows by hover over another div?

i have two tables
<table id='standings'>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches'>
<tr id='match1'>
<td id='matchTeam1>Team1</TD>
<td class='score'> 22-31</td>
<td id='matchTeam3>Team3</td>
</tr>
</table>
My goal is to hover over the row with id 'match1' from the second table and have the rows with id 'tableTeam1' and 'tableTeam3' highlighted
1.)
how is this possible by js/css?
2.) How can it be done by using a php database request when
"Select tableTeam1,tableTeam2 from matches where id='match1'"
Thank you so much in advance

Try this:
$('#match1')
.mouseenter(function() {
$('#tableTeam1').addClass('highlighted');
})
.mouseleave(function() {
$('#tableTeam1').removeClass('highlighted');
})
You also need to add some CSS there, like this one:
.highlighted { background-color: red;}
I don't know your data structure but it should be something like that, I think:
...
<tr id="<?php echo $data['column_name']; ?>" <?php echo ($data['column_name'] === 'match1')? 'class="highlighted"' : ''; ?>>
...

Put your team numbers in a data attribute in rows of the matches then it is fairly simple to parse them to match the elements in the other table and toggle a class on them
$('#matches .match-row').hover(function() {
const teams = $(this).data('teams');
teams.forEach(num => $('#tableTeam' + num).toggleClass('active'))
})
tr.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='standings' border=1>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches' border=1>
<tr class="match-row" data-teams="[1,3]">
<td>Team1</td>
<td class='score'> 22-31</td>
<td>Team3</td>
</tr>
<tr class="match-row" data-teams="[2,3]">
<td>Team2</td>
<td class='score'> 55-1 Blowout!</td>
<td>Team3</td>
</tr>
</table>

Highlight multiple rows in several tables

I have a page with several rows containing information, made by several users. I'm looking for a way to highlight the all the users rows on mouseover.
This "Highlight multiple items on hover's condition" almost solved my problem, but since the classes or id's in my problem are dynamic from a database, and would contain an identifier from the DB and are unique each time. I have not been able to apply it.
Example code: https://jsfiddle.net/3cehoh78/
<table class="testtable">
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 1a</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 2a</td>
<td class="cellclass">Frodo</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 3a</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 4a</td>
<td class="cellclass">Legoman</td>
<td class="cellclass">data</td>
</tr>
</table>
<br>
<br>
<table class="testtable">
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 1b</td>
<td class="cellclass">Sauron</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 2b</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 3b</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 4b</td>
<td class="cellclass">Legoman</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 5b</td>
<td class="cellclass">Frodo</td>
<td class="cellclass">data</td>
</tr>
</table>
In this example, I want all the rows with "Sam" to be highlighted on mouseover on one of them, so rows 1a,3a,2b,3b.
I was thinking of adding a class to all the Sam rows when generating the tables (Sam has a unique user ID), but how do I then change css that affects all the rows on mouseover (and not just one).
Please note that I cant pre-add css classes for all the unique userID's, this is just an example.

Here a solution with JQuery https://jsfiddle.net/3cehoh78/5
$(document).ready(function() {
$( "tr" ).hover(function() {
var search = $(this).find("td:eq(1)").text();
$( ".highlight" ).removeClass("highlight");
$("tr:contains('"+search+"')").addClass("highlight");
}); /* END HOVER */
}); // end document ready

Simple solution without using jQuery and co: https://jsfiddle.net/3cehoh78/3/
var rows = [].slice.call(document.querySelectorAll('.testtable tr'));
rows.forEach(function(row) {
row.addEventListener('mouseover', function() {
resetHighlighting();
var name = row.querySelector('td:nth-child(2)').textContent;
rows.forEach(function(r) {
if (r.querySelector('td:nth-child(2)').textContent === name) {
r.classList.add('highlighted');
}
});
});
});
function resetHighlighting() {
rows.forEach(function(row) {
row.classList.remove('highlighted');
});
}

Here's another way using vanilla-JavaScript.
var tds = document.querySelectorAll('td');
var highlight = function () {
// take this person's name from the 2nd cell
var name = this.parentNode.children[1].innerHTML;
// highlight cells with same name
tds.forEach(function (td) {
var tr = td.parentNode;
// compare other's person name with this person name
// highlight if there is a match
tr.classList.toggle('highlight', tr.children[1].innerHTML === name)
});
}
// attach an event listener to all cells
tds.forEach(function (td) {
td.onmouseover = highlight;
});
Demo

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

Get id of table cell

I've got a html-table that is actually a chessboard. Something like:
<table id="chessboard">
<tr>
<td id="A8"></td>
<td id="B8"></td>
<td id="C8"></td>
<tr>
<tr>
<td id="A7"></td>
<td id="B7"></td>
<td id="C7"></td>
<tr>
<tr>
<td id="A6"></td>
<td id="B6"></td>
<td id="C6"></td>
<tr>
</table>
Now I am trying to make a JQuery script that returns the cell id (ie "A8", "B6", etc) once one clickes anywhere on in the table (chessboard). I've tried a lot, but I can't get it to work.
One of the things I tried:
$("#chessboard").on("click", function(cell){
alert(cell.target).attr("id"));
})
Anybody got a solution?

Try:
$("#chessboard td").on("click", function(cell){
alert(this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="chessboard">
<tr>
<td id="A8">A8</td>
<td id="B8">B8</td>
<td id="C8">C8</td>
<tr>
<tr>
<td id="A7">A7</td>
<td id="B7">B7</td>
<td id="C7">C7</td>
<tr>
<tr>
<td id="A6">A6</td>
<td id="B6">B6</td>
<td id="C6">C6</td>
<tr>
</table>

cell.target in this case refers to the DOM element that dispatched the event. DOM elements don't have a .attr() method, that is a jQuery object method.
To use it, you'd need to first wrap up your DOM element in a jQuery object:
$("#chessboard").on("click", function(e){
$cell = $(e.target);
alert($cell.attr('id'));
});
Nitpick: Call the event something relevant, not cell. It'll just confuse you later on.

Try something like...
$('#chessboard').click(function() {
alert($(this).attr('id'));
});
The 'this' works like a charm.
Also don't forget to reference the jquery script somewhere in your document:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Try this mate
$("#chessboard tr").on("click","td", function(cell){
alert(this.id);
})
this is the example on JSFIDDLE

Thanks for the replies. I've got the answer.
This worked:
$("#chessboard td").on("click", function(cell){
alert(this.id);
})

Total up values of table cell but only one value is allowed per row

I'm trying to create a scorecard program which allows the user to select cells of a table and gauge a score, I'm at a point where I can add each score the user clicks (admittedly in probably a very clunky way) but my problem is that the way the logic works is that only one value per row can be chosen. Here's an example - http://jsfiddle.net/5q9nS/2/
To clarify, if the user chooses "#a1" the value of "2" should be added to the total. If the user then selects "#b1" this value should subtract the previously selected value because duplicate values from the same row are not allowed. However the total should add any value choosen from the rows a2-c2, a3-e3, a4-c4 etc.....
I hope that's clear, the logic for the selected classes works to try and further demonstrate.
Any help would be hugely appreciated! As you will be able to tell i'm just on the learning curve and need to hit the summit.
HTML
<table width="100%" id="pcpScoring">
<tr>
<td width="30%"> </td>
<td width="14%" class="tblLabel">Own Savings</td>
<td width="14%" class="tblLabel">Bank or B.S. Loan</td>
<td width="14%" class="tblLabel">Dealer Finance</td>
<td width="14%" align="center"> </td>
<td width="14%" align="center"> </td>
</tr>
<tr valign="top">
<td>How do you normally fund your vehicle?</td>
<td class="tblNumber"><a id="a1">2</a></td>
<td class="tblNumber"><a id="b1">4</a></td>
<td class="tblNumber"><a id="c1">3</a></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
<td class="tblLabel">1-2 years</td>
<td class="tblLabel">3 years</td>
<td class="tblLabel">4 years</td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr valign="top">
<td>How often would you "ideally" like to change your vehicle?</td>
<td class="tblNumber"><a id="a2">4</a></td>
<td class="tblNumber"><a id="b2">2</a></td>
<td class="tblNumber"><a id="c2">1</a></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td> </td>
<td class="tblLabel">upto 6,000</td>
<td class="tblLabel">6-12,000</td>
<td class="tblLabel">12-18,000</td>
<td class="tblLabel">18-25,000</td>
<td class="tblLabel">over 25,000</td>
</tr>
<tr valign="top">
<td>How many miles do you drive per year?</td>
<td class="tblNumber"><a id="a3">5</a></td>
<td class="tblNumber"><a id="b3">4</a></td>
<td class="tblNumber"><a id="c3">3</a></td>
<td class="tblNumber"><a id="d3">2</a></td>
<td class="tblNumber"><a id="e3">1</a></td>
</tr>
<tr>
<td> </td>
<td class="tblLabel">Part Exchange</td>
<td class="tblLabel">Private Sale</td>
<td class="tblLabel">Pass on to Famiy</td>
<td class="tblLabel"> </td>
<td class="tblLabel"> </td>
</tr>
<tr valign="top">
<td>How do you usually dispose of your vehicle? </td>
<td class="tblNumber"><a id="a4">4</a></td>
<td class="tblNumber"><a id="b4">2</a></td>
<td class="tblNumber"><a id="c4">1</a></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td colspan="6" class="tblNumber" style="text-align:right"><span class="total">Total Score</span><span id="pcpScore" class="total">0</span></td>
</tr>
</table>
jQuery
$(document).ready(function(){
//PCP Scorecard on Click add class
$('.tblNumber a').click(function() {
$(this).addClass('selected');
});
$('#a1').click(function() {
$(this).addClass('selected');
$('#b1, #c1').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b1').click(function() {
$(this).addClass('selected');
$('#a1, #c1').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c1').click(function() {
$(this).addClass('selected');
$('#a1, #b1').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#a2').click(function() {
$(this).addClass('selected');
$('#b2, #c2').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b2').click(function() {
$(this).addClass('selected');
$('#a2, #c2').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c2').click(function() {
$(this).addClass('selected');
$('#a2, #b2').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#a3').click(function() {
$(this).addClass('selected');
$('#b3, #c3, #d3, #e3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b3').click(function() {
$(this).addClass('selected');
$('#a3, #c3, #d3, #e3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c3').click(function() {
$(this).addClass('selected');
$('#a3, #b3, #d3, #e3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#d3').click(function() {
$(this).addClass('selected');
$('#a3, #c3, #e3, #b3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#e3').click(function() {
$(this).addClass('selected');
$('#a3, #b3, #c3, #d3').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#a4').click(function() {
$(this).addClass('selected');
$('#b4, #c4').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#b4').click(function() {
$(this).addClass('selected');
$('#a4, #c4').removeClass('selected');
addUp(parseInt($(this).text()));
});
$('#c4').click(function() {
$(this).addClass('selected');
$('#a4, #b4').removeClass('selected');
addUp(parseInt($(this).text()));
});
function addUp(addScore) {
var totalScore = (parseInt($('#pcpScore').text())) + addScore;
$('#pcpScore').html(totalScore);
}
});

You can accomplish all you need within the click function:
$('.tblNumber a').click(function() {
$(this).parents('tr').find('a').removeClass('selected');
$(this).addClass('selected');
var total = 0;
$('.tblNumber .selected').each(function() {
total += parseInt($(this).text());
});
$('#pcpScore').text(total);
});
Line by line it: Clears the previously selected items in the row, selects the current item, then iterates over the selected items in the table adding to the total then sets the text in the pcpScore span.
EDIT: Working jsfiddle example: http://jsfiddle.net/cbailster/ycymB/

You can use the "each" method in jquery to traverse each of your rows.
http://api.jquery.com/jQuery.each/
$('table tr').each(function() { /*Magic Happens Here*/ });
Then, you can target a specific cell by using the "eq()" selector
http://api.jquery.com/eq-selector/
$('table tr').each(function() {
var value = $(this).find('td:eq(1)').text(); //second cell in the row
});
You can even just use a single selector
$('table tr td:eq(1)').each(function() {
var value = $(this).text(); //second cell in the row
});
Use selectors, you get the idea ;-)

Here's a working solution: http://jsfiddle.net/5q9nS/2/
And the JS:
var totalDiv = $('#pcpScore');
$('.tblNumber').click(function(){
var $this = $(this);
if(!$this.hasClass('selected')){
var prevSelected = $this.siblings('.selected');
$this.addClass('selected');
prevSelected.removeClass('selected');
var currentTotal = +totalDiv.text(); //the plus sign converts this to a number
var prevSelectedVal = +prevSelected.children('a').text();
var newSelectedVal = +$this.children('a').text();
totalDiv.text(currentTotal + newSelectedVal - prevSelectedVal);
}
});
First we store the element that holds the total in a variable because we're going to need to access it every time a .tblNumber is clicked. This makes the script more efficient because it doesn't have to re-find that element every time.
After that, we simply bind a click event handler to every .tblNumber element. We then use jQuery's DOM traversal methods to deselect the previously selected .tblNumber in that row, as well as get it's value and the new value so that we can adjust the total appropriately.
Having looked at your original code, the key to dramatically shortening it like I did here is the this keyword. While this can be a complicated topic in JS, when used inside an event handler (.click(function(){...})) like this, it refers to the element the fired the event. So it gives us the context of the event, which is what allows us to identify the correct cells, rather than binding a slightly different click event handler to every single cell, as you had done.