2015-07-12 66 views
0

我有一個HTML表格,其中幾個td是固定的,其餘都是動態的。因此,截至目前(在所有領域都是靜態的),表看起來像這樣使用javascript動態添加td到特定位置的html表格

label1 tb1 | label2 tb2 | label3 tb3 | label4 tb4 

標籤名稱和相應的文本框的值都希望能dynamic.I已經賺得從表中動態值,並將它們存儲在一個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); 
} 

上面的代碼生成所述文本框和標籤「一些文本」,而不是在期望的位置。任何人都可以請建議如何去解決這個問題。

+0

如果你可以添加HTML代碼。 –

+0

是的,我正在使用jquery – sweetu514

+0

@Zakaria Acharki:HTML是非常基本的,沒有什麼特別的。 – sweetu514

回答

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)') 
+0

您的代碼似乎添加了td,但是如何重新排列td並獲取我想要的表結構(每行最多4個td,將其他td推到下一行)。任何問題? – sweetu514