將td元素添加到標識爲tr的標識

標題說明的內容非常多。我有HTML documnet與將td元素添加到標識爲tr的標識

<table> 
    <tr> 
    <td id="1"></td> 
    </tr> 
</table>

設置並希望javascript函數添加<td id="2"></td>前一個，所以它看起來像下。

<table> 
    <tr> 
    <td id="1"></td> 
    <td id="2"></td> 
    </tr> 
</table>

來源

2014-01-14 Drew

爲'ID'使用整數的病提醒，開始與信[A-Za-z]，然後是數字或其他字符 – Rafee

JavaScript的用於插入新的小區（一個或多個）到一個錶行（純）insertCell()方法。

插入新的單元格的內容在錶行的末尾使用的insertCell（）：

var row = document.getElementsByTagName("tr")[0]; 
var x = row.insertCell(-1); 
x.innerHTML="New cell";

Try in fiddle

您也可以使用JavaScript .appendChild：

var parenttbl = document.getElementsByTagName("tr"); 
var newel = document.createElement('td'); 
var elementid = document.getElementsByTagName("td").length 
newel.setAttribute('id',elementid); 
newel.innerHTML = "New Inserted" 
parenttbl[0].appendChild(newel);

Try in fiddle

更新時間：

HTML：

<table> 
    <tr id="myrow"> 
    <td id="1">Hello</td> 
    </tr> 
    <tr> 
    <td id="1">Hello</td> 
    </tr> 
    <tr> 
    <td id="1">Hello</td> 
    </tr> 
</table>

的Javascript：

var parenttbl = document.getElementById("myrow"); 
var newel = document.createElement('td'); 
var elementid = document.getElementsByTagName("td").length 
newel.setAttribute('id',elementid); 
newel.innerHTML = "New Inserted" 
parenttbl.appendChild(newel);

Try in fiddle

來源

2014-01-14 06:26:27

我認爲這是不好的主意，由索引工作。如果他在索引之上有一行以上呢？或者，如果他不知道在哪個行中有ID的話？更好的方法是使用td的ID來獲取父元素（tr）並在那裏添加新的td。 –

是的，你是對的，但在這裏我只掩飾OP的要求。請參閱更新後的答案..） –

使用jQuery .append()方法...

$('tr').append('<td>content</td>').attr('id', '2');

演示：Fiddle

來源

2014-01-14 05:57:48

無需使用jQuery這樣一個簡單的事情，這樣做：

var tbl = document.querySelector("table"); 
var row0 = tbl.rows[0];

或

var row0 = document.querySelector("#1");

再插入你的：

var cell1=row0.insertCell(1);//the 1 here is the cell index 
cell1.id="2";

管理DOM元素，我通常提供與本地JavaScript編寫，而不是使用jQuery或任何其他JavaScript框架。

來源

2014-01-14 05:57:58

使用jQuery：

$(document).ready(function(){ 

    $('#1').parent().append('<td id="2">2</td>'); 

});

來源

2014-01-14 06:08:50 sprite

function addField() { 

     var myTable = document.getElementById("myTable"); 
     var currentIndex = myTable.rows.length; 

     var currentRow = myTable.insertRow(-1); 

     var a ; 
     var currentCell= currentRow.insertCell(-1); 
     currentCell.style.height="25px"; 
     currentCell.style.width="20px"; 
     globalCheck=globalCheck+1; 
     currentCell.innerHTML="<input id=\"check"+globalCheck+"\" type=\"checkbox\"></input>";

來源

2017-02-01 12:11:58 deepesh

請勿僅發佈代碼。特別_this_多。儘量把你的答案集中在最低限度。 – Fairy

將td元素添加到標識爲tr的標識

回答

相關問題