Javascript Change table cell background color from second table cell
Question
I'm wondering if there is any possible way to change the background color of a table cell from choosing a color from second table cell, using javascript only. If you can tell me how I will be glad. I'm a newbie at this so don't hate me. :) Thank you for any feedback!
This is how it should look like:
EDIT: My HTML code :
<html lang="en"> <head> </head> <style> table.first { border-collapse: collapse; display: inline-block; } table.first td { border: solid 2px; border-color: black; font-size: 3em; padding: 1em; } table.second { border-collapse: collapse; display: inline-block; float: right; } table.second td { border: solid 2px; border-color: black; font-size: 3em; padding: 1em; } </style> </head> <body> <table class="first"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table class="second"> <tr> <td bgcolor="black"></td> </tr> <tr> <td bgcolor="blue"></td> </tr> <tr> <td bgcolor="red"></td> </tr> <tr> <td bgcolor="yellow"></td> </tr> <tr> <td bgcolor="green"></td> </tr> </table> <script src="main.js"></script> </body> </html>
1 answers
solution1
0 ACCPTED 2018-04-06 16:55:59
Use
document.querySelectorAll()to get a list of all elements that match the given CSS selector.Use
Array.from()to turn it into an array andforEachto iterate thru them.Get the
bgcolorof the clickedtdand apply it to the all the other table'stds.
(function() { var color; Array.from(document.querySelectorAll('.second td')).forEach(td => { td.onclick = function() { color = this.getAttribute('bgcolor'); }; }); Array.from(document.querySelectorAll('table.first td')).forEach(td => { td.onclick = function() { if (color) this.setAttribute('bgcolor', color); }; }); document.getElementById("clear").onclick = function() { Array.from(document.querySelectorAll('table.first td')).forEach(td => { td.removeAttribute('bgcolor'); }); }; })();
table.first { border-collapse: collapse; display: inline-block; } table.first td { border: solid 2px; border-color: black; font-size: 3em; padding: 1em; } table.second { border-collapse: collapse; display: inline-block; float: right; } table.second td { border: solid 2px; border-color: black; font-size: 3em; padding: 1em; }
<button id=clear>Clear</button><br> <table class="first"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table class="second"> <tr> <td bgcolor="black"></td> </tr> <tr> <td bgcolor="blue"></td> </tr> <tr> <td bgcolor="red"></td> </tr> <tr> <td bgcolor="yellow"></td> </tr> <tr> <td bgcolor="green"></td> </tr> </table>
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.