Menu
I need to change background color of single cell in table using java script.
During document i need style of all cell should be same ( so used style sheet to add this. ) , but on button click i need to change color of first cell.
following is the sample code
<html lang="en"> <head> <script type="text/javascript" > function btnClick() { var x = document.getElementById("mytable").cells; x[0].innerHTML = "i want to change my cell color"; x[0].bgColor = "Yellow"; } </script> </head> <style> div { text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } td.td { border-width : 1px; background-color: #99cc00; text-align:center; } </style> <body> <div> <table id = "mytable" width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #ffffff;"> <tr valign="top"> <td class = "td"><br /> </td> <td class = "td"><br /> </td> </tr> <tr valign="top"> <td class = "td"><br /> </td> <td class = "td"><br /> </td> </tr> </table> </div> <input type="button" value="Click" OnClick = "btnClick()"> </body> </html> 
818
Select the cells in which you want to add or change the fill color. On the Table Design tab, click the arrow next to Shading. Click the color you want from Theme Colors or Standard Colors, or click More Fill Colors.
Using pre-defined classes, we can change the color of table cells and table rows. In order to change the color of the table row, we need to specify in <tr> tag with the required class & for changing the color of the table row then specify it inside <td> tag with the required class. Let us learn classes one by one.
We can change the background color using the backgroundColor property in JavaScript. To use this property, you need to get the element whose background color you want to change, and then you can use the backgroundColor property to set the background color.
Try this:
function btnClick() { var x = document.getElementById("mytable").getElementsByTagName("td"); x[0].innerHTML = "i want to change my cell color"; x[0].style.backgroundColor = "yellow"; } Set from JS, backgroundColor is the equivalent of background-color in your style-sheet.
Note also that the .cells collection belongs to a table row, not to the table itself. To get all the cells from all rows you can instead use getElementsByTagName().
Demo: http://jsbin.com/ekituv/edit#preview
87
<table border="1" cellspacing="0" cellpadding= "20"> <tr> <td id="id1" ></td> </tr> </table> <script> document.getElementById('id1').style.backgroundColor='#003F87'; </script> Put id for cell and then change background of the cell.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
