如何摆脱 <tbody> 和 </tbody> HTML 表格标签但不删除标签内的内容？

Question

我已经查看了有关删除表格 tbody 标记的其他一些问题（见下文），但仍然遇到问题。

<tbody> tag displays in chrome but not source

Javascript delete a table tbody tag

How do i remove <tbody> tags from an HTML table?

执行 SQL 查询后，我想生成一个带有结果的 HTML 表，然后通过将相似的行包装在 tbody /tbody 标记中来对它们进行分组，以便使用 CSS 奇/偶符号对组进行颜色编码。

我的 javascript 函数可以正常工作，但问题是当第一次生成行时，Chrome 浏览器将它们包装在 tbody /tbody 标记中。所以最后我留下了下面的 HTML 和一组额外的外部 tbody 标记（这会弄乱表格中的列对齐并且无法正确显示）。

(* 我想去掉外面的 tbody 标签集 *)

<tbody>
   <tbody></tbody>
   <tbody></tbody>
   <tbody></tbody>
   <tbody></tbody>
   <tbody></tbody>
</tbody>

我意识到我可以在用于显示表格行开始的 php 中加入一些逻辑，并尝试以这种方式插入开始和结束 tbody 标记，以便永远不会生成外部集，但它更简洁一些只是显示所有行，然后将它们分组。

是否可以删除外部 tbody 标签而不删除它们之间的内容？谢谢。

html文件

    <!-- start all funds table -->
    <table id="all_funds_table" data-role="table" data-mode="columntoggle" class="table 
      table-sm table-striped table-hover">
        <thead>
            <tr>
                <th>ng</th>
                <th>FID</th>
                <th>Lid</th>
            </tr>
        </thead>
        <!-- <tbody> -->
            <?php                
                if ($result = $connection->query($sql)) {
                    
                    while ($row = $result->fetch_assoc()) {
                        // only display rows with ng = 1
                        if ($row['ng'] == 1) {
            ?>
                            <tr class="gpRep">
                                <td style = "text-align: center"><?= $row['ng'] ?></td>
                                <td style = "text-align: center"><a href="group.php?FID=<?php echo $row['FID']; ?>"><?= $row['FID'] ?></a></td>
                                <td style = "text-align: center"><a href="fund.php?lid=<?php echo $row['lid']; ?>"><?= $row['lid'] ?></a></td>
                            </tr>                  

            <?php
                        // collapse rows with ng != 1
                        } else {
            ?>

                            <tr class="collapse">
                                <td style = "text-align: center"><?= $row['ng'] ?></td>
                                <td style = "text-align: center"><a href="group.php?FID=<?php echo $row['FID']; ?>"><?= $row['FID'] ?></a></td>
                                <td style = "text-align: center"><a href="fund.php?lid=<?php echo $row['lid']; ?>"><?= $row['lid'] ?></a></td>
                            </tr>  
            
            <?php

                        } // end if ($row['ng'] == 1)

                    } // end while
                    $result->free();
                } // end if
            
                if ($mysqli->connect_error) {
                    die("Connection failed: " . $mysqli->connect_error);
                }
                
                $connection->close();
            ?>
            <!-- close connection  -->
            <!-- </tbody> -->
            <script type="text/javascript">
                wrapRows();
            </script>
        </table>
    <!-- end all funds table -->

js文件

function wrapRows(){
    $('#all_funds_table tr.gpRep').each(function(){
        $(this).nextUntil('.gpRep').add(this).wrapAll('<tbody />');
    });
} 

Answer 1

使用 Javascript

接受所需的<tbody>，而是在迭代它们时将行移到它之外。完成后删除原来的<tbody>。

请注意，在每种情况下都需要在调用 nextUntil 后添加第一行。

$('#all_funds_table tr.gpRep').each(function(){
    $(this).nextUntil('.gpRep').addBack().wrapAll('<tbody />')
        .parent().appendTo($('#all_funds_table'));
});
$('#all_funds_table tbody:first').remove();

使用 PHP

确实没有什么好的理由不首先输出<tbody> 标签。这将节省浏览器的处理时间。

    <?php                
        if ($result = $connection->query($sql)) {
            $first = true;
            while ($row = $result->fetch_assoc()) {
                // only display rows with ng = 1
                if ($row['ng'] == 1) {
                    if (!$first) { echo '</tbody>'; }
                    $first = false;
    ?>
                    <tbody>
                    <tr class="gpRep">
                        <td style = "text-align: center"><?= $row['ng'] ?></td>
                        <td style = "text-align: center"><a href="group.php?FID=<?php echo $row['FID']; ?>"><?= $row['FID'] ?></a></td>
                        <td style = "text-align: center"><a href="fund.php?lid=<?php echo $row['lid']; ?>"><?= $row['lid'] ?></a></td>
                    </tr>                  

    <?php
                // collapse rows with ng != 1
                } else {
    ?>

                    <tr class="collapse">
                        <td style = "text-align: center"><?= $row['ng'] ?></td>
                        <td style = "text-align: center"><a href="group.php?FID=<?php echo $row['FID']; ?>"><?= $row['FID'] ?></a></td>
                        <td style = "text-align: center"><a href="fund.php?lid=<?php echo $row['lid']; ?>"><?= $row['lid'] ?></a></td>
                    </tr>  
    
    <?php

                } // end if ($row['ng'] == 1)

            } // end while
            $result->free();
        } // end if
    
        if ($mysqli->connect_error) {
            die("Connection failed: " . $mysqli->connect_error);
        }
        
        $connection->close();
    ?>
    <!-- close connection  -->
    <!-- </tbody> -->
    <script type="text/javascript">
        wrapRows();
    </script>
</tbody>
</table>

HTML 和 PHP 的这种混合并不特别容易阅读。根据您要输出的数据量，您可能会发现先将信息加载到所需格式的数组中，然后将数组转换为 HTML 输出会更简洁。