js tr td dom 增加行

最新推荐文章于 2019-07-20 14:44:55 发布

蜕变之痛

最新推荐文章于 2019-07-20 14:44:55 发布

阅读量695

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/liuxueyi521/article/details/52851421

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>

<head>

<script >
//采用标准方式增加tr td
function onAddCell()
{
var tb = document.getElementById("tb1");
var i = tb.rows.length;
var newTr = tb.insertRow("2");
//添加列
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();

newTd1.innerHTML = "insertRow + insertCell + innerHTML = td"+i;
newTd2.innerHTML = "insertRow + insertCell + innerHTML = td"+i;
}

//通过tr的id，增加并改变其子节点
function onAddTh()
{
var tr = document.getElementById('001');

var th = document.createElement('th');
var ath = tr.appendChild(th);

var td = document.createElement('td');
var atd = tr.appendChild(td);

ath.innerHTML = 'tr(id)= tr + th';
atd.innerHTML = 'tr(id)= tr + th';
}

//通过字符串方式增加子节点
function onAddCus()
{
var tb = document.getElementById("tb1");
var i = tb1.rows.length;

var newTr = tb.insertRow("1");
newTr.innerHTML = '<td id="th'+i+'" >通过str方式增加 tr + td</td><td>行号为'+i+'</td>';
}


//通过createTextNode填写单元格的值
function onAddTextNode()
{
var tb = document.getElementById("tb1");
var i = tb.rows.length;
var newTr = tb.insertRow("0");
//添加列
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();

var text1 = document.createTextNode('insertRow + insertCell + createTextNode = td1-'+i);
var text2 = document.createTextNode('insertRow + insertCell + createTextNode = td2-'+i);

newTd1.appendChild(text1);
newTd2.appendChild(text2);
}


</script>
</head>

<body >
<table id="tb1" align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%">
<tr >
<td>1</th>
<td>2</td>
</tr>
<tr >
<td>3</th>
<td>4</td>
</tr>
<tr id="001"></tr>
<tr >
<td>5</th>
<td>6</td>
</tr>
</table>
<input type="button" name="Submit" value="增加th" οnclick="onAddTh()" />
<input type="button" name="Submit" value="增加cell方式" οnclick="onAddCell()" />
<input type="button" name="Submit" value="增加任意node" οnclick="onAddCus()" />
<input type="button" name="Submit" value="增加TextNode" οnclick="onAddTextNode()" />
</body>