I have template content with table that was not wrapped properly inside tr or td tag.
var tamplate = `<table class="table"><tbody><tr><td>ID</td><td>Name of Location</td><td>Last Name</td><td>Gender</td></tr>{% for row in Data %}<tr><td>{{row.LocationID}}</td><td>{{row.LocationName}}</td>{% if row.Foreign==True %}<td>I love my country</td>{% else %}<td>I wish to visit {{row.LocationName}}</td></tr>{% endif %}{% endfor %}</tbody></table>`; // receive content of templateTherefore, I would like to wrap any text or element that are not inside tr tag with tr or td according to their hierarchy order and hide them. This would look like this:
<table class="table"><tbody><tr><td>ID</td><td>Name of Location</td><td>Last Name</td><td>Gender</td></tr><tr style="display:none;"><td>{% for row in Data %}</td></tr><tr><td>{{row.LocationID}}</td><td>{{row.LocationName}}</td><td style="display:none;">{% if row.Foreign==True %}</td><td>I love my country</td><td style="display:none;">{% else %}</td><td>I wish to visit {{row.LocationName}}</td></tr><tr style="display:none;"><td>{% endid %}</td></tr><tr style="display:none;"><td>{% endfor %}</td></tr></tbody></table>I have no clue how to check if element or content is not inside tr or td of table tag and to wrap them accordingly.
Any suggestion or idea is really appreciated. Thanks.
Best Answer
Group tr elements with tbody tag and the other elements outside tr you can use tr or td tags
The only way to group table rows in a wrapper element is using the tbody tag. Any other element, you are going to break your HTML validation.
You can group the other elements outside tr elements inside tr elements and wrap all together inside tbody tag.
In this case your code will be similar to this:
<table class="table"><tbody><tr><td></td>..</tr></tbody><tbody><tr><td></td>..</tr><tr></tr><tr></tr></tbody></table>As you noticed, we can use more than one tbody tag inside a table. Use this to wrap your tr elements.