[英]Javascript Change table cell background color from second table cell
我想知道是否有任何可能的方法可以更改表格单元格的背景颜色，而只需从JavaScript中选择第二个表格单元格的颜色即可。 如果您能告诉我，我将如何高兴。 我是这个新手，所以不要恨我。 :)感谢您的任何反馈！
它应该是这样的：
编辑：我的HTML代码：
<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>
使用document.querySelectorAll()获取与给定CSS选择器匹配的所有元素的列表。
使用Array.from()将其转换为数组，并让forEach遍历它们。
获取单击的td的bgcolor并将其应用于其他所有表的td 。
(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>
使用JavaScript根据JSON值更改表格单元格背景色
[英]Using javascript to change table cell background color based on json value
使用 javascript 根据用户输入更改表格单元格背景颜色
[英]change table cell background color according to user input using javascript
如何使用 javascript 更改 HTML 表格单元格的背景颜色？
[英]How do I change the background color of an HTML table cell with javascript?
如果单元格内容匹配，如何使用javascript更改表格中单元格的背景颜色
[英]How to change background color of cell in table using javascript if cell content match
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.