Question

我已经回答了在此链接中突出显示一行表： HTML+JavaScript: How to highlight a row on click of a button in Javascript?

我使用下面的代码生成动态表格和highlight函数来突出显示一行，但是当我添加一些CSS时，它无法更改行的颜色。为什么呢？

＆＃13;

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>")

＆＃13;

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;
}

＆＃13;

Answer 1

如果您想为行添加颜色，请在css上添加表格行例如

tr
{ background-color: green;
  }

并删除td上的background-color:white;

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

Answer 2

highlight功能目前正在background-color添加tr并删除background-color。这是有效的，问题是您在CSS中将td的{{1}}设置为white，隐藏了应用于background-color的{{1}}包含它们。要解决此问题，请从tr删除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>")

添加CSS后背景颜色不会改变

2 个答案: