Your IP : 216.73.216.40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Table Rows</title>
<style>
.details {
display: none;
}
.main-row:hover {
cursor: pointer;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table border="1">
<tr class="main-row" data-target="details1">
<td>Main Row 1</td>
<td>Info 1</td>
</tr>
<tr class="details details1">
<td colspan="2">Detail Row 1-1</td>
</tr>
<tr class="details details1">
<td colspan="2">Detail Row 1-2</td>
</tr>
<tr class="main-row" data-target="details2">
<td>Main Row 2</td>
<td>Info 2</td>
</tr>
<tr class="details details2">
<td colspan="2">Detail Row 2-1</td>
</tr>
<tr class="details details2">
<td colspan="2">Detail Row 2-2</td>
</tr>
<tr class="details details2">
<td colspan="2">Detail Row 2-3</td>
</tr>
<tr class="main-row" data-target="details3">
<td>Main Row 3</td>
<td>Info 3</td>
</tr>
<tr class="details details3">
<td colspan="2">Detail Row 3-1</td>
</tr>
</table>
<script>
document.querySelectorAll('.main-row').forEach(row => {
row.addEventListener('click', () => {
const targetClass = row.getAttribute('data-target');
document.querySelectorAll(`.${targetClass}`).forEach(detailRow => {
if (detailRow.style.display === 'none' || detailRow.style.display === '') {
detailRow.style.display = 'table-row';
} else {
detailRow.style.display = 'none';
}
});
});
});
</script>
</body>
</html>