How can I insert a <tr> element into a dynamic table?

Question

I hope someone has a clue for me. I am new to javascript and I am trying to build this structure with a dynamically generated table.

<table>
<tr>
  <td>value1</td>
  <td>value2</td>       
  <td>value3</td>
  <td>value4</td>
</tr>
<tr>
  <td>value5</td>
  <td>value6</td>       
  <td>value7</td>
  <td>value8</td>
</tr>
<tr>
  <td>value9</td>
  <td>value10</td>      
  <td>value11</td>
  <td>value12</td>
</tr>
<tr>
  <td>value13</td>
  <td>value14</td>      
  <td>value15</td>
  <td>value16</td>
</tr>
</table>

What I tried to do is to echo a <tr> after every 4th pair of <td>. Like this:

var tbody_el = $("#somevalue_id"); //is the id of the table, which needs to be filled with `<tr>` and `<td>`.
var counter = 0;
$.each(TonsOfData.getValues(), function(index, somevalue) {
            //var tr_el = $("<tr></tr>");
            var td_checkbox_el = $("<td></td>");
            var cbName  =   "cb_"   + somevalue.displayName + "_name";
            var cbId    =   "cb_"   + somevalue.displayName + "_id";
            var inputEl = $("<input type='checkbox' name='" + somevalue.displayName + "' id='" + cbId + "'/>");
            inputEl.data("somevalueId", somevalue.id);
            inputEl.attr("checked", "checked");
            inputEl.change(valueChoicesClick);
            var div_value_id = "div_value_" + somevalue.id + "_id";
            var div_value_el = $("<div id='" + div_value_id + "' align='left'></div>");
            var td_value = $("<td></td>");


            td_checkbox_el.append(inputEl);
            if(counter == 0 || (counter +1)%4 == 0){
                echo "<tr>";
            } 
            td_value.append(td_checkbox_el, "<br> Displayname: " + somevalue.displayName,"<br> Unit: "+ somevalue.unitstring," <br>",div_value_el);

            if((counter +1)%4 == 0) {
                echo "</tr>";
            }           
            //tbody_el.append(tr_el);
        }
        );

Is this even possible? Or am I going a totally wrong way?

Big thanks for any suggestions!!

EDIT: I found a solution that worked for me. I doubt anyone will have the same issue, but I'd like to share it anyway. I created a counter that gets incremented in the loop and gave the <td> parts a class-id.

if(counter<4){
    td_value = $("<td class='select1'></td>");
}
if(counter>3 && counter <8){
    td_value = $("<td class='select2'></td>");
}
if(counter>7 && counter <12){
    td_value = $("<td class='select3'></td>");
}
if(counter>11 && counter <16){
    td_value = $("<td class='select4'></td>");
}
if(counter>15 && counter <20){
    td_value = $("<td class='select5'></td>");
}

After that I used the JQuery wrapAll()-function to add my <tr>. That did the trick.

$('#somevalue_id td.select1').wrapAll('<tr/>');
$('#somevalue_id td.select2').wrapAll('<tr/>');  
$('#somevalue_id td.select3').wrapAll('<tr/>');  
$('#somevalue_id td.select4').wrapAll('<tr/>');  
$('#somevalue_id td.select5').wrapAll('<tr/>');

I know, it is not the most elegant solution but it works. Thanks again to everyone that gave me hints, you helped me solve this!

Answer 1

You can use jquery and using .each for iterating and getting the fourth element in each iteration using .nth-child and inserting after using .insertAfter

Answer 2

Please find the example to mainuplate the table accordingly. this is one way you can do it

<table class="test_table" id="test_table">
</table>

var tableEl = $(".test_table");
var noOfRows = 4;
var noOfColumns = 4;
//Empty the table in case there is anything already there

tableEl.each(function(){
    var tableElObject = $(this);
    for(i=0;i<noOfRows;i++)
    {
        rowStart = "<tr>";
        for(j=0;j<noOfColumns;j++)
        {
            rowStart +="<td>"+"Test"+i+j+"</td>";
        }
        tableElObject.append(rowStart+"<tr/>");
    }

});

http://jsfiddle.net/qg5hG/

Answer 3

if you want to create tables trs and tds dynamically this way can be better for you....

var table = document.createElement('table');
    table.setAttribute('border','0');
    table.setAttribute('cellspacing','5');
    table.setAttribute('cellpadding','5');
    table.setAttribute('width','100%');

    var tr = table.insertRow(-1);// "-1"s meaning add tr to end of table if you want to add top of table you must use "0"
        tr.id = 'Tr1 ID';

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 1';

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 2';

    var tr = table.insertRow(-1);

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 1';

        var td = tr.insertCell(-1);
            td.innerHTML = 'Inside of TD 2';