我可以使用Jquery插入一个结束</tr>标签和开口<tr>标记在动态表中

Can I use Jquery to insert a closing </tr> tag and an opening <tr> tag inside a dynamic table?

本文关键字：gt lt tr 标签 动态 插入 Jquery 可以使 结束 一个 我可以      更新时间：2023-09-26

我试图使用下面的代码动态添加结束标记，然后再添加打开标记，这样我就可以每三个单元格创建一个新行。几乎可以工作了，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" width="266" 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>

您不能像处理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

另一种方法是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/

正如loneomeday所说，您不能将DOM视为HTML。此外，TR关闭标记是可选的，因此当您插入带有打开TR的标记时，浏览器会关闭它。您不需要关闭标记。

相关文章：