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

【javascript】table对象操作，动态创建，删除指定行列

2013-11-28 17:27 901 查看

<script type="text/javascript">
function createTab(){ //动态创建表格
var tabNode = document.createElement("table");
tabNode.setAttribute("id","tabID");
var rowNum = document.getElementsByName("rowNum")[0].value; //取文本框的值
var colNum = document.getElementsByName("colNum")[0].value;
for(var x=1;x<=rowNum;x++){
var trNode = tabNode.insertRow(); //调用table 对象方法插入一行
for(var y=1;y<=colNum;y++){
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+"...."+ y ;  //添加的是HTML文本
}
}
document.getElementsByTagName("div")[0].appendChild(tabNode);
event.srcElement.disabled = true ; //关闭触发事件
}
function delrow(){  //删除指定行
var tabNode = document.getElementById("tabID");
if(tabNode==null){
alert("不存在");
return ;
}
var rowNum = document.getElementsByName("delrow")[0].value;
if(rowNum>0 && rowNum<=tabNode.rows.length)
tabNode.deleteRow(rowNum-1);
else
alert("行不存在");
}
function delcol(){  //删除指定列
var tabNode = document.getElementById("tabID");
if(tabNode==null){
alert("不存在");
return ;
}
var colNum = document.getElementsByName("delcol")[0].value;
if(colNum>0 && colNum <= tabNode.rows[0].cells.length){
for(var x=0;x<tabNode.rows.length;x++){
tabNode.rows[x].deleteCell(colNum-1);
}
}
else
alert("列不存在");
}
</script>
<style type="text/css">
table{ border: #0066FF 1px solid ; width:60%;}
table th{ border:#003399 1px solid ; background-color: #0099FF;}
table td{border:#0099FF 1px solid ;}
</style>
</head>
<body>
行：<input type="text" name="rowNum"/>
列： <input type="text" name="colNum" />
<input type="button" value="创建表格" onclick="createTab()"/><br/>
<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delrow()" />
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delcol()" />
<div></div>  <%--指定表格添加的位置 --%>
</body>

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

标签： javascript table

相关文章推荐

新的分享

章节导航