javascript - 如何仅将 CSS 样式应用于选定的行？

Question

我有一个用 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;
}

Answer 1

我建议您在选择行时向该行添加一个类，并在 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>