Javascript 如何仅将CSS样式应用于选定行？

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

更改此行：

if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")

if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")

关于这一行：

if(String(row.style.backgroundColor)=="rgb(30, 144, 255)")

if (row.getPropertyValue("background-color") =="rgb(30, 144, 255)")

getComputedStyle是一个函数，它接受一个元素作为参数，并返回一个包含该对象上使用的所有样式的对象。然后，我们可以对结果调用getPropertyValue来获取css属性的值

---

阅读更多信息：

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

document.querySelector'mytable'.onclick=functionev{ var行=ev.target.parentElement； 如果row.classList.containsblueel{ row.classList.removebuel； }否则{ row.classList.addbluel； } } 桌子{ 字体系列：arial，无衬线； 边界塌陷：塌陷； 宽度：67%； } 表，th，td{ 边框：1px实心DDDD； 文本对齐：左对齐； 填充：8px； } tr：第n个孩子{ 背景色：DDDD； } 布鲁尔{ 背景颜色：蓝色； } 标题1标题2标题3 元素元素元素 元素元素元素 元素元素元素 元素元素元素

---

这可能非常简单，您只需要使用toggleClass方法从您选择的tr标记行添加或删除样式。 这可以通过JQuery轻松完成

试试这个：

---

祝你好运

也许您可以尝试在用户选择项目时向表行添加类名，并在用户选择其他位置时从表行中删除类名。然后使用该类名设置表行的样式。