如何将 <tr> 元素插入到动态表中？

Question

我希望有人对我有线索。我是 javascript 新手，我正在尝试使用动态生成的表来构建这个结构。

<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>

我尝试做的是在每第四对<td> 之后回显<tr>。 像这样：

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);
        }
        );

这甚至可能吗？ 还是我走错了路？

非常感谢您的任何建议！

编辑： 我找到了一个适合我的解决方案。我怀疑有人会遇到同样的问题，但我还是想分享一下。 我创建了一个在循环中递增的计数器，并为 <td> 部分提供了一个类 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>");
}

之后，我使用 JQuery wrapAll()-函数添加了我的 <tr>。成功了。

$('#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/>');

我知道，这不是最优雅的解决方案，但它确实有效。 再次感谢所有给我提示的人，你们帮我解决了这个问题！

Answer 1

您可以使用 jquery 并使用 .each 进行迭代，并使用 .nth-child 在每次迭代中获取第四个元素，并在使用 .insertAfter 之后插入

Answer 2

请找到相应的示例来更新表格。 这是您可以做到的一种方法

<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

如果您想动态创建表 trs 和 tds，这种方式可能更适合您....

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';