您的位置：首页 > Web前端 > HTML

DOM对HTML元素的增删改查操作2

2016-09-30 23:46 148 查看

代码：

<!DOCTYPE html>
<html>
<head>
<title>创建元素</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript">
function createTable(){
var b=document.getElementById("test");
var t=document.createElement("table");//创建表格标签
t.border="1";设置边框粗细
t.id="mytable";
var caption=t.createCaption();创建表格标题
caption.innerHTML="我的表格";
for(var i=0;i<5;i++)
{
var tr=t.insertRow(i);//在索引出插入一行
for(var j=0;j<4;j++)
{
var td=tr.insertCell(j);//插入单元格
td.innerHTML="单元格"+i+j;
}
}
b.appendChild(t);
}

function deleteLastRow(){
var t=document.getElementById("mytable");
if(t.rows.length>0)
{
t.deleteRow(t.rows.length-1);
}
}

function deleteLastCell(){
var t=document.getElementById("mytable");
var lastRow=t.rows[t.rows.length-1];
if(lastRow.cells.length>0)
{
lastRow.deleteCell(lastRow.cells.length-1);
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个5行4列的表格"  onclick="createTable()"/>
<input type="button" value="删除最后一行" onclick="deleteLastRow()"/>
<input type="button" value="删除最后一个单元格" onclick="deleteLastCell()"/>

</body>
</html>

知识点总结：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航