0

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!

Theras886
  • 3
  • 2
  • `echo` is not JavaScript. But you can create tr elements the same way you are currently creating td elements. Then append the trs to the table and append the tds to the latest tr. – nnnnnn Mar 04 '14 at 20:59
  • The most obvious solution is a for loop incremented by 4, as in `for (var i=0; i – adeneo Mar 04 '14 at 21:04

3 Answers3

0

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

MIIB
  • 1,849
  • 10
  • 21
  • Thank you for the fast reply! I am still trying to get this to work, though the js, doesn't behave like I expect. I tried this: `$( "" ).insertBefore("td:eq( 0 )"); $( "" ).insertAfter("td:eq( 3 )"); $( "" ).insertAfter("td:eq( 7 )");` but nothing happens when I test it with jsfiddle. I am not even sure, if it is allowed to split the `` in two pieces. I also tried the approach: `$('').insertAfter('#my_table td:nth-child(4)'); $('').insertBefore('#my_table td:nth-child(1)');`, but with no luck aswell. I seem to be missing some key point. – Theras886 Mar 06 '14 at 13:21
0

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/

Akhilesh Sharma
  • 1,580
  • 1
  • 17
  • 29
  • Thanks for the fast reply, I tried your approach aswell! The "Problem" is, that the table needs to be inside this for each loop: `$.each(TonsOfData.getValues(), function(index, somevalue)` because it gets one piece of live-data at a time. Means, I cannot store it in an array an pass it to the table. (which had exactly the structure I needed, thank you for that!) – Theras886 Mar 06 '14 at 10:38
0

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';
Reha Ozenc
  • 39
  • 4