您的位置：首页 > 编程语言

Dom编程（动态创建表格、删除行、删除列）

2014-08-09 15:17 225 查看

创建表格：Safari浏览器适用

其他浏览器：填写表格行列数字反向。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>动态创建表格</title>
<style type="text/css">
table, td{
border:thin solid #06F;
}
</style>

<script type="text/javascript">
function createTable(){
var tableNode = document.createElement("table");
tableNode.setAttribute("id","tableid");

var row = document.getElementsByName("rownum")[0].value;
var col = document.getElementsByName("colnum")[0].value;

for(var x=1; x<=row; x++){
var trNode = tableNode.insertRow();
for(var y=1; y<=col; y++){
var tdNode = trNode.insertCell();
//tdNode.innerHTML = (x+"..."+y).fontcolor("red");
//Safari的数字顺序是反向的：
tdNode.innerHTML = ((row-x+1)+"..."+(col-y+1)).fontcolor("red");
}
}
document.getElementById("divid").appendChild(tableNode);
//火狐浏览器的disabled属性不可用：
event.srcElement.disabled = true;
}

function delRow(){
var tableNode = document.getElementById("tableid");
if(tableNode ==null){
alert("表格不存在");
return;
}
var delrow = document.getElementsByName("delrow")[0].value;
if(delrow>0 && delrow<=tableNode.rows.length){
tableNode.deleteRow(delrow-1);
}else{
alert("所删行不存在");
}
}

function delCol(){
var tableNode = document.getElementById("tableid");
if(tableNode ==null){
alert("表格不存在");
return;
}
var delcol = document.getElementsByName("delcol")[0].value;
if(delcol>0 && delcol<=tableNode.rows[0].cells.length){
for(var x=0; x<tableNode.rows.length; x++){
tableNode.rows[x].deleteCell(delcol-1);
}
}else{
alert("所删列不存在");
}
}
</script>
</head>

<body>
行：<input type="text" name="rownum" /><br />
列：<input type="text" name="colnum" /><br />
<input type="button" value="创建表格" onclick="createTable()" /><br />
<input type="text" name="delrow" /><input type="button" value="删除行" onclick="delRow()" /><br />
<input type="text" name="delcol" /><input type="button" value="删除列" onclick="delCol()" /><br />
<div id="divid">
</div>
</body>
</html>

效果：

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

标签：

相关文章推荐

新的分享

章节导航

Dom编程（动态创建 表格、删除行、删除列）

创建表格：Safari浏览器适用

效果：

Dom编程（动态创建表格、删除行、删除列）