使用javascript将td动态添加到特定位置的html表

时间:2015-07-12 23:53:32

标签: javascript jquery html

我有一个HTML表格,其中修复了一些td,其余的都是动态的。截至目前(当所有字段都是静态的时),表格看起来像这样

label1  tb1 | label2 tb2 | label3 tb3 | label4 tb4

标签名称和相应的文本框值都是动态的。我从表中获取了动态值并将它们存储在Javascript数组中。我现在需要通过将它们附加到上面的静态表来显示这些存储的值。

但这有一个条件。动态字段需要附加在特定位置。它们需要在tb3之后添加。

由于一行最多可包含4个元素,因此需要将任何其他字段推送到下一行。例如:如果我从数据库中获得3个动态td,那么新表需要看起来像

label1 tb1         |label2 tb2         |label 3 tb3 |dynalabel1 dynatb1
dynalabel2 dynatb2 |dynalabel3 dynatb3 |label4 tb4  

标签4及其值是静态组件,因此需要推送到最后。

我搜索了很多,但我无法在特定位置找到HTML列。

我尝试使用JS在表格中插入动态字段,但它们不会在所需位置生成。

这里是我写的代码

var table = document.getElementById("myTable");

 for(var i = 0; i < val ; i++){  
 // val is the number of td's needed

 var td1 = document.getElementById('td1');  // get id of tb3
 var text = document.createTextNode("some text"); 
 td1.appendChild(text);
 table.appendChild(td1);
 var newField = document.createElement('input');
 newField.setAttribute('type', 'text');
 var newTd = document.createElement('td');
 newTd.appendChild(newField);
 var newTr = document.createElement('tr');
 newTr.appendChild(newTd);
 table.appendChild(newTr);
 }

以上代码生成文本框和标签&#34;某些文字&#34;,但不在所需位置。任何人都可以建议如何解决这个问题。

1 个答案:

答案 0 :(得分:0)

[编辑]

$('<td>new cell</td>').insertAfter('table tr td:nth-child(3)')

[上一个回答] 你总是可以用肮脏的方式来做......

$('<tr><td>one</td><td>two</td><td>three</td></tr>').insertAfter('table tr:nth-child(3)')