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>

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

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>部分提供了一个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>");
}

之后我使用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';

如何将元素插入动态表？

3 个答案: