добавить td элемент в tr с id

Question

Довольно многое, что говорится в названии. У меня есть HTML documnet с установкой

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

Answer 1

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

Answer 2

Использование JQuery .append() метод ...

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

Демо: Fiddle

Answer 3

нет необходимости использовать 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.

Answer 4

использование JQuery:

$(document).ready(function(){ 

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

}); 

Answer 5

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