I encountered an issue with my table that was prepopulated with JSON data while attempting to add collapsibles between specific rows. Strangely, I found myself unable to properly insert a closing tag to start a new row. The insertion kept happening in an unexpected manner:
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<!--it inserts here and doesn't read the first </tr> in the variable -->
</tr>
<!--but I want to insert a new tr here-->
<tr></tr>
Here's what my setup looks like:
var euheadertr = '</tr>\
<tr class="collapsableRow">\
<td class="regionTab" colspan="7">\
<label for="eu">EU</label>\
<input type="checkbox" name="eu" id="eu" data-toggle="toggle" hidden>\
</td></tr>';
$('#secondTable tr:nth-child(3)').append(euheadertr);
I also attempted the following approach:
$('#secondTable tbody tr:nth-child(3)').append(euheadertr);