Insert tr after every second loop using Jquery

Step1:

Welcome to Designer blog, Here We are going to discuss about, How to insert tr tag to every  second loop

Step2:

Now, We have the static content of the 4 columns, our requirements is to looping the tr into 2 columns

Step3:

Below script

Step1 : Assigning the four variables  table1, table1, table2, table3, table4 and  passing into array.

Step2 : Assigning the Variable str with opening the table and tr Tags.

Step3 : Looping arrays and checking if condition for  2 cols and one row  using i % 2 if ((i % 2) == 0) ( if u need three cols assign i % 3)

Step4: Create a function output result  append  content in the result div


Script:

var table1 = "<td><table class='suggested-wrapper'  border='0'>" +
            "<tbody><tr> <td><img class='img-responsive' alt='' src='images/banner1.jpg'></td></tr><tr><td><table width='100%' border='0'>  <tbody>" +
                                      "<tr>" +
                                         " <td><img src='images/img1.png' class='img-circle' width='46' height='46' alt=''/></td>" +
            "                              <td><h4> Amanda Costainer </h4>" +
            "                                <small>@amandacontaine </small></td>" +
             "                             <td>...</td>" +
                                        "</tr>" +
                                      "</tbody>" +
                                    "</table></td>" +
                                " </tr>" +
                                 "<tr>" +
                                 " <td><img src='images/iconstar.jpg' width='22' align='left' height='22' alt=''/>" +
                                   "  <h3>American Dad </h3></td>" +
                                " </tr>" +
                                " <tr>" +
                                 "  <td><table width='100%' border='0'>" +
                                  "     <tbody>" +
                                    "     <tr>" +
                                    "       <td class='test'> Lorem ipsum dolor sit amet, nonummy, nulla duis integer vestibulum sapien" +
                                     "        ac, onsectetuer nunc conubia nibh, elit sodales in nisi sit nec.</td>" +
                                        " </tr>" +
                                       "</tbody>" +
                                    " </table></td>" +
                                 "</tr>" +
                                 "<tr>" +
                                   "<td><table width='100%' border='0'>" +
                                      " <tbody>" +
                                        " <tr>" +
                                           "<td><span class='num'> 58 </span> <img src='images/smallstar.jpg' alt='' align='absmiddle'></td>" +
                                           "<td><span class='num'>Rank : 105</span></td>" +
                                           "<td class='num'><img src='images/previous.jpg' alt='' align='absmiddle'>  0</td>" +
                                        " </tr>" +
                                      " </tbody>" +
                                    " </table></td>" +
                                 "</tr>" +
                                " <tr>" +
                                  " <td width='25%'><table border='0' width='100%'>" +
                                      " <tbody>" +
                                       "  <tr>" +
                                         "  <td><span class='num'>120 </span> <img align='absmiddle' src='images/sites.jpg' alt='' ></td>" +
                                          " <td><span class='num'>300 </span><img align='absmiddle' src='images/emp.jpg' alt='' ></td>" +
                                          " <td><span class='num'>1.1k </span><img align='absmiddle' src='images/pagelikes.jpg' alt='' ></td>" +
                                          " <td><span class='num'>97 </span><img align='absmiddle' src='images/report.jpg' alt='' ></td>" +
                                           "<td><span class='num'>120</span> <img align='absmiddle' src='images/cmt.jpg' alt='' ></td>" +
                                           "<td><span class='num'>10 </span><img align='absmiddle' src='images/pageshare.jpg' alt='' ></td>" +
                                         "</tr>" +
                                       "</tbody>" +
                                     "</table></td>" +
                                " </tr>" +
                               "</tbody>" +
                             "</table></td>";

 var array = [table1, table2, table3, table4];


            outputResult = function (str) {
                var content = $('#results').html();
                $('#results').html(content + str);
            }

            var str = "<table><tr>";
            for (i = 0; i < array.length; i++) {
                if ((i % 2) == 0) {
                    var str = str + "</tr><tr>";
                }
                var str = str + "<td>"+ array[i] + "</td>";

            }
            var str = str + "</tr></table>";
            outputResult(str);
        });



Step:5
 Enjoy Folks