I'm attempting to dynamically add cells to the right side of a table using jQuery when a row is clicked. I have successfully implemented inserting a new row on click, which also toggles its visibility with CSS.
However, I am encountering an issue where the .after() method seems to be placing all the HTML content inside the first cell instead of adding it as a new row in the table. I suspect this might be related to how my CSS is set up for toggling the row display, but I haven't been able to pinpoint the exact cause. Changing the CSS display property has not resolved the problem.
Any assistance or guidance on this matter would be greatly appreciated!
CSS:
.metadata {
display: none;
}
.metadata.active {
display: block;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-right:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
td, th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: left;
padding: 8px;
font-weight: normal;
}
th {
text-decoration: none;
font-size: 15px;
}
tr:nth-child(even) {
background-color: #F5F5F5;
}
.content:hover {
background-color: #99d1db;
cursor: pointer;
}
HTML:
<div class="table" style="text-align:center;">
<table>
<tbody>
<tr>
<th></th>
<th >blah</th>
<th>blah</th>
<th>blah</th>
<th>blah</th>
<th>blah</th>
<th>blah</th>
</tr>
<tr class="content">
<td><input type="checkbox" name="tablebox" value="checker"></td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function(){
$('body').on('click','table tr', function(){
var row = $(this).closest('tr');
if (row.next().hasClass("metadata")) {
row.next().toggleClass("active");
} else {
$(row.after('<tr class="content metadata active" ><td>something</td><td>something</td><td>something</td><td>something</td><td>something</td></tr>'));
}
});
});