使用id将td元素添加到tr

时间:2014-01-14 05:55:46

标签: javascript html

相当于标题所说的内容。我有

的html文档
<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>

5 个答案:

答案 0 :(得分:6)

使用jquery:

$(document).ready(function(){

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

}); 

答案 1 :(得分:6)

用于将新单元格插入表格行的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

答案 2 :(得分:1)

不需要使用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框架。

答案 3 :(得分:0)

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

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

演示:Fiddle

答案 4 :(得分:0)

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