JS怎样使用appendChild 给table 增加tr td

insertRow（）函数可以带参数，形式如下：这个函数将新行添加到index的那一行前，比如insertRow（0），是将新行添加到第一行之前，默认的insertRow（）函数相当于insertRow（－1），将新行添加到表的最后。

<scriptlanguage="JavaScript">

vart＝document．getElementById（＂test＂）；

t.innerHTML="<tr><td>数据</td></tr>"

／／或者

vart＝document．getElementById（＂test＂）；

vartr＝document．createElement（＂tr＂）；

vartd＝doucment．createElement（＂td＂）；

td．innerHTML＝＂数据＂；

tr．appendChild（td）；

t．appendChild（tr）；

｝

</script>

扩展资料：

给table添加一行

1、＄（＂＃addTable＂）．click（function（）｛；

2、vartr="<tr>"+；

3、"<td>11</td>"+；

4、"<td>22</td>"+；

5、"<td>33</td>"+；

6、"<td>44</td>"+；

7、"<td>55</td>"+；

8、"</tr>"

9、＄（＂．layui－table＂）．append（tr）；

1，Javascript *** 作table,tr,td ，代码如下：function messageSort() { --函数名var message=document.getElementById("message").value--添加的内容(下面有对应的html)if(name == "" ) return--如果添加为空,返回var row = document.createElement("tr")//创建tr的row.setAttribute("id", name)--设置row的属性. var cell = document.createElement("td")//创建tdcell.appendChild(document.createTextNode(name))//td里注入文本row.appendChild(cell)//将TD注入TRvar deleteButton = document.createElement("input")//这部分是添加删除button按钮deleteButton.setAttribute("type", "button")deleteButton.setAttribute("value", "删除")deleteButton.onclick = function () { deleteSort(name)}cell = document.createElement("td")cell.appendChild(deleteButton)//注入按钮row.appendChild(cell)//将TD注入TRdocument.getElementById("sortList").appendChild(row)//将TR注入到相应地方(sortList可以看下面html)var cell5 = document.createElement("td")cell.style.background="#ffffff"//背景颜色设置row1.style.color="#ffffff"//字体颜色设置cell5.style.display = "none" //ie不支持setAttribute("style", "display:none")// dd 直接写TD是这样..cell5.appendChild(document.createTextNode(zdid))row.appendChild(cell5)}// 删除内容function deleteSort(id) {//这个函数为上面的删除button调用的var rowToDelete = document.getElementById(id)var sortList = document.getElementById("sortList")sortList.removeChild(rowToDelete)} 增加内容: 添加 内容: *** 作2，一般情况下定义一个效果良好的表格采用下面的属性定义方式代码： 当某个td中没有内容或者没有可见元素时，td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 代码段：.text-overflow{ display:block/*内联对象需加*/ width:31emword-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ } 3，但对于表格table来讲是有些不同，代码段：table{ width:30emtable-layout:fixed/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/ }

正规的添加表格行是 insertrow，添加单元格是 insertcell。而且你 createelement 里面需要是合法的 html 元素标签，例如 tr，td。

function

btncreatelemet_click()

{

var

con=document.getelementbyid("lblnewelemet")

var

row

=

con.insertrow(0)

var

cell

=

row.insertcell(0)

cell.innerhtml

=

"aaaaa"

}

下面是使用 createelement 创建 tr 和 td，但这样不标准

function

btncreatelemet_click()

{

var

con

=

document.getelementbyid("lblnewelemet")

var

tr

=

document.createelement("tr")

con.appendchild(tr)

var

td

=

document.createelement("td")

tr.appendchild(td)

td.innerhtml

=

"aaaaa"

}

---