Background color is not changing after adding CSS

Question

I already have an answer of highlighting a row of a table in this link: HTML+JavaScript: How to highlight a row on click of a button in Javascript?

I'm using the below code to generate a dynamic table and the highlight function to highlight a row, but when I add some CSS it's unable to change the color of the row. Why?

 function highlight(ctrl) { var elements = document.getElementsByTagName('tr'); console.log(elements[1].style.background); for (var i = 0; i < elements.length; i++) elements[i].style.background = ''; //remove background color var parent = ctrl.parentNode.parentNode; parent.style.background = '#E9FFAA'; //add it to specific element. } document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>"); document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>"); for (row = 1; row < 5; row++) { document.write("<tr>"); for (col = 1; col <= 4; col++) { if (col == 1) { document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>"); } if (col == 2) { document.write("<td width='140'>Name</td>"); } if (col == 3) { document.write("<td width='200'>Location</td>"); } if (col == 4) { document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>"); } } document.write("</tr>") } document.write("</table>") 

 table { border-collapse: separate; border-spacing: 0.5px; border-color: gray; background-color: #d6d6d6; } th { border: 1px solid silver; text-align: left; color: #232323; font: normal 13px/18px"Open Sans", helvetica, sans-serif; line-height: 15px; background-color: #f5f5f5; zoom: 1; overflow: hidden; padding: 7px 6px 7px 6px; } td { color: #232323; font: normal 13px/18px"Open Sans", helvetica, sans-serif; background-color: white; border: 1px solid silver; } .scrollableTable { height: 380px; width: 500px; overflow: auto; } 

Answer 1

if you want color for your row add your table row on your css for example

tr
{ background-color: green;
  }

and remove background-color:white; on your td

td{
color:#232323;
font: normal 13px/18px "Open Sans",helvetica,sans-serif;
//background-color:white;
border: 1px solid silver;
}   

Answer 2

The highlight function is currently adding and removing the background-color from the tr s. This is working, the problem is that you are setting the background-color of the td s to white in CSS which is hiding the background-color applied to the tr that contains them. To fix, remove background-color: white; from the td .

 function highlight(ctrl) { var elements = document.getElementsByTagName('tr'); console.log(elements[1].style.background); for (var i = 0; i < elements.length; i++) elements[i].style.background = ''; //remove background color var parent = ctrl.parentNode.parentNode; parent.style.background = '#E9FFAA'; //add it to specific element. } document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>"); document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>"); for (row = 1; row < 5; row++) { document.write("<tr>"); for (col = 1; col <= 4; col++) { if (col == 1) { document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>"); } if (col == 2) { document.write("<td width='140'>Name</td>"); } if (col == 3) { document.write("<td width='200'>Location</td>"); } if (col == 4) { document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>"); } } document.write("</tr>") } document.write("</table>") 

 table { border-collapse: separate; border-spacing: 0.5px; border-color: gray; background-color: #d6d6d6; } th { border: 1px solid silver; text-align: left; color: #232323; font: normal 13px/18px"Open Sans", helvetica, sans-serif; line-height: 15px; background-color: #f5f5f5; zoom: 1; overflow: hidden; padding: 7px 6px 7px 6px; } td { color: #232323; font: normal 13px/18px"Open Sans", helvetica, sans-serif; border: 1px solid silver; } .scrollableTable { height: 380px; width: 500px; overflow: auto; }