How to hover <td> that contain specific data - html

Question

I need to display red background color in <td> that I hovered. For example, if I hovered 'Apple', then 'Apple' in all <td> shall be hovered same color as well. Currently can only hover one <td>Apple</td>.
table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
td:hover{
background-color:red
}
html {
font-size: 24px;
}
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td>Apple</td>
</tr>
</table>
Codepen

Answer 1

You can do that with the help of jQuery. Try running the following snippet.
$('.apple').hover(
function(){
$('.apple').css({"background":"red"});
},function(){
$('.apple').css({"background":"white"});
})
$('.orange').hover(
function(){
$('.orange').css({"background":"orange"});
}
,function(){
$('.orange').css({"background":"white"});
}
)
$('.lemon').hover(
function(){
$('.lemon').css({"background":"yellow"});
}, function(){
$('.lemon').css({"background":"white"});
})
html {
font-size: 24px;
}
table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
td span {
display: block;
}
td:hover span.apple {
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td><span class="apple">Apple</span></td>
<td><span class="orange">Orange</span></td>
<td><span class="lemon">Lemon</span></td>
</tr>
<tr>
<td><span class="orange">Orange</span></td>
<td><span class="lemon">Lemon</span></td>
<td><span class="apple">Apple</span></td>
</tr>
</table>

Answer 2

This cannot be done with just HTML and CSS as CSS is not aware of content.
Using Javascript you can set CSS variables that in turn will set the background of a cell.
This snippet goes through each td element and sets the style background: var(--name of fruit) so for example all apple cells have the style="background: var(--apple);" added to them. Then when a td is hovered the JS sets the --apple to red and when the mouse moves out it sets it to transparent.
That way all those tds with background: var(--apple) get highlighted.
There is no need to iterate through all the cells in the table each time a hover takes place, you can do it by setting everything up once at the start.
function setHighlight(e) {
table.style.setProperty('--' + e.target.textContent, 'red');
}
function removeHighlight(e) {
table.style.setProperty('--' + e.target.textContent, 'transparent');
}
const table = document.querySelector('table');
const tds = document.querySelectorAll('td');
tds.forEach(td => {
td.addEventListener('mouseover', setHighlight);
td.style.backgroundColor = 'var(--' + td.textContent + ')';
});
tds.forEach(td => {
td.addEventListener('mouseout', removeHighlight);
});
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td>Apple</td>
</tr>
</table>

Answer 3

Add a class in every td and use JQuery.
See the example below.
$(document).ready(function(){
$("td.apple").hover(function(){
$(".apple").css("background-color", "red");
}, function(){
$(".apple").css("background-color", "white");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td class="apple">Apple</td>
<td class="apple">Apple</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td class="apple">Apple</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td class="apple">Apple</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

Answer 4

If You don't want to add extra IDs and add jquery as dependency to Your code, You can use vanilla JS
// Get all TDs
const tds = Array.from(document.querySelectorAll("td"));
tds.map(td => {
// bind mouseenter to TDs to paint BG
td.addEventListener("mouseenter", (event) => {
const text = event.target.textContent;
// paint TDs with same text
tds.map(td => {
if(td.textContent === text) {
td.style.background = 'red';
}
});
});
// bind mouseleave to TDs to remove BG
td.addEventListener("mouseleave", (event) => {
tds.map(td => {
td.style.background = 'transparent';
});
})
});
Working example: https://codepen.io/ipasha/pen/eYRKxpP

Answer 5

table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
.apple:hover{
background-color:red
}
html {
font-size: 24px;
}
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td class="apple">Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td class="apple">Apple</td>
</tr>
</table>

Answer 6

This is one way you can try:
html {
font-size: 24px;
}
table {
margin: 2rem;
}
th, td {
border: 1px solid #333;
}
td span {
display: block;
}
td:hover span.apple {
background-color:red
}
<h3>Table 1</h3>
<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td><span class="apple">Apple</span></td>
<td><span>Orange</span></td>
<td><span>Lemon</span></td>
</tr>
<tr>
<td><span>Orange</span></td>
<td><span>Lemon</span></td>
<td><span class="apple">Apple</span></td>
</tr>
</table>