How to append html tags every three rows of a table that is being dynamically generated using Jquery

Is there a way I can use Jquery to insert '' tags after every three dynamically generated table cells so that I end up with a dynamic three column table?

Please excuse my lack of knowledge, I'm literally trying to write my first jquery script ever, so I know absolutely nothing. I know php and I have a table that has a loop within it that is dynamically creating <td></td> with the information inside each tag. In other words it is dynamically creating the table cells within a static <tr></tr> tag. The problem is that it keeps outputing tables without breaking them up into rows which leaves me with a bunch of columns. I've read other articles on this but none seem to have the exact same problem as I do, and I am still struggling to understand how to write custom Jquery code.

The php code is very long and is full of numerous if statements and other functions so I'm not going to post it here but just to make it a little simpler, I made miniature mockup of what I'm trying to do.

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

            </table>

This code loops and dynamically adds table cells up to the limit I give it which would represent my database items. Every three rows, it adds either a <tr></tr> or just a </tr> depending on whether the loop continues or not. This c开发者_如何转开发reates a 3 column table. I can't apply this code for my script because it is a very long and complex script that has a lot of if statements and functions. There is no way of doing it like this without breaking the code or having to rewrite everything from scratch all over again.

Is there anyway I can append the tr tags dynamically with Jquery and how would I go about to applying this to?

The jQuery approach would be to loop through all of the tabs, and add them to newly created tags, which themselves are added to the html of the table. Roughly:

var thisCount=0;
var currenttag="<tr />";
var table=$("table");
$("td").each(function () 
{
    if(thiscount==2)
        {
             table.appendChild(currenttag);
             thisCount=0;
             currenttag="<tr />";
        }
     currenttag.appendChild(this);
}

( this is just to give an idea, not intended as a formal JQ answer. If anyone wants to edit it so it works fully, feel free ).

You can use a selector to select every third row:

$('#table_id > tr:nth-child(3n)').whatever_function()

However if you are trying to append end /tr tags, try doing it in PHP using a counter that resets itself (this code should get you started):

echo "<tr>";
$x = 0;
$y = 0;
while (have_products($x)) {
    echo '<td>' . somelongassfunction() . '</td>';
    $y++;
    if ($y == 3) {
        $y = 0;
        echo "</tr><tr>";
    }
    $x++;
}
echo "</tr>";