我可以使用 Jquery 在动态表中插入结束 </tr> 标记和开始 <tr> 标记吗？

Posted 2023-02-22

【中文标题】我可以使用 Jquery 在动态表中插入结束 </tr> 标记和开始 <tr> 标记吗？

【英文标题】：Can I use Jquery to insert a closing </tr> tag and an opening <tr> tag inside a dynamic table?

【发布时间】：2011-09-27 01:24:21

【问题描述】：

我正在尝试使用下面的代码动态添加结束标记，然后打开，以便我每三个单元格创建一个新行。几乎可以工作，DOM 检查器显示一个 TR 节点，问题是，发生了一些事情 tr 没有关闭 tr 标签。我是 Jquery 的新手，这段代码有什么问题吗？

         <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function()
        $('td:nth-child(3n)').after('</tr><tr>');
        );
        </script>

        <table id="mytable"  border="1" cellspacing="10" cellpadding="10">
        <tbody>
          <tr>
        <?php
        function somelongassfunction()
            return 'Hello';
            
        function have_products($a)
            return $a<=20;
            
        $x=0;
        while (have_products($x)) 
            echo '<td>' . somelongassfunction() . '</td>';
            $x++;
        //------------------------------------- 
        /*if (fmod($x,3) == 0) 
                        echo '</tr><tr>';
                        continue;
                        */
        //--------------------------------------                    
        if ($x==20)
            break;
               
           
        ?>
        </tr>
        </tbody>
        </table>    

【问题讨论】：

纯 php 解决方案不起作用？

【参考方案1】：

正如 lonesomeday 所说，您不能将 DOM 视为 html 的一部分。此外，TR closing tags are optional 所以当你插入一些带有打开 TR 的标记时，浏览器会关闭它。你不需要结束标签。

【参考方案2】：

另一种方法是detach所有td元素，然后使用splice将它们分成3组：

var td = $('tr td').detach();
$('tr').remove();
while(td.length>0) 
 $(td.splice(0,3)).wrapAll('<tr />').parent().appendTo('tbody');   

示例：http://jsfiddle.net/niklasvh/C6unV/

【讨论】：

Niklas，您的回答有效 (+1)，但影响了我页面中的所有表格，我应该如何更改才能使其适用于特定表格？谢谢:)

【参考方案3】：

您不能像处理 HTML 文档一样处理 DOM 选择。 DOM 文档是节点的层次结构，而不是标签。浏览器将 HTML 中的标签 解析 成 DOM 文档。你不能再添加一点 HTML，然后期望它被解析回 DOM 结构。

相反，您需要在 jQuery 中进行包装。这是一种可行的方法——它可能不是最有效的。

$('td').each(function(idx) 
    if (idx % 3) 
        return;
     else 
        $(this).nextAll(':lt(2)').andSelf().wrapAll('<tr/>');
    
).parent().unwrap();

jsFiddle