Select and unselect table cells html/javascript
Question
I have a table in my website. I need the cell color to change when the user clicks on it and return to the default color on a second click. I have accomplished the first part but dont know how to revert back to default color on a second click.
<head>
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr onClick="ChangeColor(this, true);"
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr onClick="ChangeColor(this, true);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr onClick="ChangeColor(this, true);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
5 answers
solution1
0 2014-05-28 11:06:29
Simply get the elements by tag name, loop through each td and add an event listener.
On click, toggle a class that will add the requested background color.
const tds = document.getElementsByTagName('td'); Object.values(tds).forEach(td => { td.addEventListener("click", changeColor); }); function changeColor() { this.classList.toggle("light-green"); }
table, tr, td { border: 1px solid black; border-collapse: collapse; } td { padding: 10px 13px; } td:hover { background-color: grey; color: white; cursor: pointer; } .light-green { background-color: #dcfac9; } .light-green:hover { background-color: green; }
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
solution2
0 2014-05-28 11:07:14
Instead of passing highlight as a parameter to your function,just call your function on click with just one as this. Then in the function you can check the colour of cell and change accordingly.
Or if you want to make it even more generic you can also pass the default colour and the new colour to change to.the function will look like this.
function ChangeColour(tableRow, defaultColour, newColour)
{
var bg = tableRow.style.backgroundColor;
if (bg == defaultColour)
{
tableRow.style.backgroundColor = newColour;
}
else
{
tableRow.style.backgroundColor = defaultColour;
}
}
solution3
0 2014-05-28 11:17:52
I would suggest to create a css class like .highlight { background-color: '#dcfac9'}
and then, in javascript, call .toggleClass('highlight') on click of the row.
solution4
0 2014-05-28 11:27:10
As @Devasayal said above toggleClass is the best solution for you...
Demo Fiddle
Javascript code
function ChangeColor(elem) {
if (elem.className != "highlight") {
elem.className = "highlight";
} else {
elem.className = "";
}
}
solution5
0 2014-05-28 11:43:25
You can use a class instead. Create a few simple functions to add, remove and toggle the class:
function hasClass(el, className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') != -1;
}
function addClass(el, className) {
if (!hasClass(el, className)) {
el.className += (el.className? ' ' : '') + className;
}
}
function removeClass(el, className) {
if (hasClass(el, className)) {
el.className = (' ' + el.className + ' ').replace(' ' + className + ' ', ' ');
}
}
function toggleClass(el, className) {
hasClass(el, className)? removeClass(el, className) : addClass(el, className);
}
Then, given a class like:
.red { background-color: red;}
Use them like:
<div id="d0">red</div>
<button onclick="toggleClass(document.getElementById('d0'), 'red')">Toggle red</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.