Могу ли я использовать Jquery для вставки закрывающего тега </tr> и открывающего тега <tr>в динамическую таблицу?

Question

Я пытаюсь использовать приведенный ниже код для динамического добавления закрывающего тега с последующим открытием, чтобы я создавал новую строку каждые три ячейки.Почти работающий, 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>    

Answer 1

Вы не можете работать с выбором DOM, как если бы это был документ HTML.Документ 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

Answer 2

Другой подход заключается в detach всех td элементах, а затем разбить их на группы по 3, используя splice:

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/

Answer 3

Как сказал один день, вы не можете относиться к DOM как к HTML.Кроме того, закрывающие теги TR являются необязательными , поэтому, когда вы вставляете некоторую разметку с открывающим TR, браузер закрывает ее.Вам не нужен закрывающий тег.