該表應該在您單擊它們時更改表行的顏色。顏色必須更改為帶有白色字體的黑色背景色。
使用javascript，單擊一行時顏色會發生變化。只有最左邊的帶有 class='podia' 的 td 不會變為黑色背景色。
我嘗試了很多東西，但似乎沒有任何效果，我可能在這里缺少知識。這里有人知道我該如何解決這個問題嗎？
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* table of festival program */
#programmering {
border-collapse: separate;
border-color: transparent;
border-spacing: 3px;
width: 100%;
}
/* style of header */
.table-header {
font-weight: bold;
background-color: #5f9ea0;
text-align: left;
color: white;
border-color: transparent;
}
/* padding td's */
td {
padding: 5px;
}
/* background-color of table */
.table-body{
background-color: #b0c4de;
}
/* style of the most left column */
.podia {
background-color: #5f9ea0;
text-align: right;
color: white;
}
/* Style of selected-row */
.selected-row {
color: white;
background-color: black;
}
</style>
</head>
<body>
<table id="programmering">
<thead class="table-header">
<tr>
<td colspan="2"></td>
<td colspan="2">13:00</td>
<td colspan="2">14:00</td>
<td colspan="2">15:00</td>
<td colspan="2">16:00</td>
<td colspan="2">17:00</td>
<td colspan="2">18:00</td>
<td colspan="2">19:00</td>
<td colspan="2">20:00</td>
<td colspan="2">21:00</td>
<td colspan="2">22:00</td>
<td colspan="2">23:00</td>
<td colspan="2">24:00</td>
</tr>
</thead>
<tbody class="table-body">
<tr>
<td class="podia" colspan="2">Mainstage:</td>
<td colspan="3">Kraantje Pappie</td>
<td colspan="4">The Krooks</td>
<td colspan="4">Krezip</td>
<td colspan="5">Lenny Kravits</td>
<td colspan="6">The Cure</td>
<td colspan="2">Armin van Buuren</td>
</tr>
<tr>
<td class="podia" colspan="2">IBA Parkstad:</td>
<td colspan="2"></td>
<td colspan="4">White Lies</td>
<td colspan="4">Rowwen Heze</td>
<td colspan="4">J Balvin</td>
<td colspan="4">Die Antwoord</td>
<td colspan="6"></td>
</tr>
<tr>
<td class="podia" colspan="2">Brightlands:</td>
<td colspan="2"></td>
<td colspan="4">Blood Red Shoes</td>
<td colspan="4">Jack Savoretti</td>
<td colspan="4">Miles Kane</td>
<td colspan="4">Mark Rondson</td>
<td colspan="6"></td>
</tr>
<tr>
<td class="podia" colspan="2">Stage 4:</td>
<td colspan="3">Au/ra</td>
<td colspan="3">Confidance Man</td>
<td colspan="2">Nana Adjoa</td>
<td colspan="4">Barns Courtny</td>
<td colspan="4">Boef</td>
<td colspan="8"></td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("programmering");
let rows = document.getElementsByTagName("tr");
for(let i = 1; i < rows.length; i ) {
let currentRow = table.rows[i];
currentRow.addEventListener('click', function() {
Array.from(this.parentElement.children).forEach(function(elem){
elem.classList.remove('selected-row');
});
// [...this.parentElement.children].forEach((el) => el.classList.remove('selected-row'));
this.classList.add('selected-row');
console.log(currentRow)
})
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
這是因為您已經使用 podia 類設定了單元格的樣式。要設定所有表格單元格的樣式，您需要在樣式中替換：
.selected-row
在
.selected-row td
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442036.html
標籤：javascript html css