如何正确地用tr或td标签包装表tr标签之外的任何内容或元素？

Question

我的模板内容包含在tr或td标记内未正确包装的表格。

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 template

因此，我想根据其层次结构顺序将tr标记内的任何文本或元素与tr或td包装在一起并隐藏它们。这看起来像这样：

<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>

我不知道如何检查元素或内容是否不在表标记的tr或td内，并相应地将它们包装起来。

任何建议或想法都非常感谢。感谢。

Answer 1

将带有tr标签的tbody元素和tr之外的其他元素分组，可以使用tr或td标签

在包装元素中对表行进行分组的唯一方法是使用tbody 标签。任何其他元素，您都将破坏HTML验证。

您可以将tr元素内tr元素之外的其他元素分组，并将所有元素包装在tbody标签内。

在这种情况下，您的代码将与此类似：

        <table class="table">
            <tbody>
                <tr>
                    <td></td>
                    .
                    .
                </tr>
            </tbody>

            <tbody>
                <tr>
                    <td></td>
                    .
                    .
                </tr>
                <tr></tr>
                <tr></tr>
            </tbody>
        </table>

您注意到，我们可以在一个表内使用多个tbody标签。使用它来包装tr元素。