我有一个用PHP构建的表,样式为偶数行灰色和奇数行白色。
可以选择行和未被选择,当选择的行它变成蓝色,
现在,当我取消选择它时,我希望它恢复到原始样式(现在,我只设法将行变成灰色,但是原始样式是只有偶数行是灰色的)

功能选择和取消选择行:
获取一行,如果一行为蓝色(例如,选择了行),则将其变为灰色,否则:将其变为蓝色(例如,将其选中)

<script>
var selected_sqf =0 ;
var selected_weight=0  ;


function myFunction(row,w) {
    if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")
    {row.style.backgroundColor='#dddddd';
    selected_sqf -= parseFloat((row.cells[10].innerHTML));
    selected_weight -=parseFloat((row.cells[11].innerHTML));;
    document.getElementById("selected_sqf").innerHTML = selected_sqf;
    document.getElementById("selected_weight").innerHTML = selected_weight;
    }
    else {
    row.style.backgroundColor='#1E90FF';
    selected_sqf += parseFloat((row.cells[10].innerHTML));
    selected_weight +=parseFloat((row.cells[11].innerHTML));;
    document.getElementById("selected_sqf").innerHTML = selected_sqf;
    document.getElementById("selected_weight").innerHTML = selected_weight;
    //alert(row.style.backgroundColor)
    }
}
</script>

斯特利:
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 67%;
}
table, th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

最佳答案

我建议您在选择行时将类添加到行中,并在css中设置样式,而不是通过编程方式更改背景颜色。这样,当您取消选择该行时,您只需删除预先添加的类,它将返回到其原始状态。请参见下面的示例。

document.querySelector('#mytable').onclick = function(ev) {
   var row = ev.target.parentElement;

   if (row.classList.contains("blueel")) {
       row.classList.remove("blueel");
   } else {
       row.classList.add("blueel");
   }
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 67%;
}
table, th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

tr.blueel {
  background-color: blue;
}
<table id="mytable">
<tr>
<th>title 1</th><th>title 2</th><th>title 3</th>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
<tr>
<td>element</td><td>element</td><td>element</td>
</tr>
</table>

08-25 10:17
查看更多