I'm looking to implement a master-detail layout, so I decided to follow this tutorial for guidance:
While trying to replicate the tutorial, I encountered an issue with my code.
Here's the code snippet that I am working on:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what the expected behavior should be:
However, when implementing it, the row appears empty. Why could this be happening?