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