javascript - 如何使用 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 或 td 包装任何不在 tr 标签内的文本或元素并隐藏它们。这看起来像这样:

<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

Group 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 元素。