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

DOM动态增删表格内容所使用到的常用方法

2017-12-10 10:26 549 查看

<html>
<head>
<title>00</title>
<script type="text/javascript" charset="utf-8">

function createTable(){
var mybody=document.getElementById("mybody");
var element=document.createElement("table");
var rows=document.getElementById("rows");
var cols=document.getElementById("cols");
var caption=document.getElementById("mycaption");
var mytext=document.getElementById("mytext");
element.createCaption().innerHTML=caption.value;
for(var i=0;i<rows.value;i++){
element.insertRow(i);
for(var j=0;j<cols.value;j++){
element.rows[i].insertCell(j);
element.rows[i].cells[j].innerHTML=mytext.value;
}
}
element.border="1";
mybody.appendChild(element);

}

</script>
</head>
<body id="mybody">

创建一个
<input type="text" id="rows" size="5"/>行，
<input type="text" id="cols" size="5">列，
标题为<input type="text" id="mycaption" size="8"/>,
表格内容为<input type="text" id="mytext" size="8"/>的表格。<br/>

<input type="button" value="开始创建" onclick="createTable()"/><br/><br/>
<input type="button" value="删除最后一行"/><br/><br/>
<input type="button" value="删除最后一个单元格"/>

</body>

</html>

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

标签： javascript dom 访问表格动态增删 id

相关文章推荐

新的分享

章节导航