添加CSS后背景色未更改

Question

我已經有了在此鏈接中突出顯示表格行的答案： HTML + JavaScript：如何在單擊Javascript中的按鈕時突出顯示行？

我正在使用以下代碼生成動態表，並使用highlight函數突出顯示行，但是當我添加一些CSS時，它無法更改行的顏色。 為什么？

 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

例如，如果要為行添加顏色，請在CSS上添加表格行

tr
{ background-color: green;
  }

並刪除background-color:white; 在你的TD上

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

Answer 2

highlight功能當前正在添加tr的background-color從中刪除background-color 。 這是可行的，問題在於您正在CSS中將td的background-color設置為white ，從而隱藏了應用於包含它們的tr的background-color 。 要解決此問題，請刪除background-color: white; 從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; }