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

DHTML技术综合演示---示例:表格删除行、列

2017-05-14 11:50 330 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>DHTML技术综合演示---示例:表格删除行、列</title>

<style type="text/css">
table{
border:#00ffff solid 2px;
width:500px;
border-collapse:collapse;

}
table td{
border:#ff80ff solid 2px;
padding:5px;
margin:1px;
}

</style>

</head>

<body>
<script type="text/javascript">
//新建一个表格，输入行号和列号可以自动生成表格
function createTable3(){
var oTableNode = document.createElement("table");
try{
var rowNum = parseInt(document.getElementsByName("rowNum")[0].value);
var colNum = parseInt(document.getElementsByName("colNum")[0].value);
if(isNaN(rowNum)){
alert("行数格式错误!");
return;
}
if (isNaN(colNum)) {
alert("列数格式错误!");
return;
}
}catch(e){
alert("不异常...");
return;
}
for(var i=1;i<=rowNum;i++){
var oTr = oTableNode.insertRow();
for(var j=1;j<=colNum;j++){
var oTd = oTr.insertCell();
oTd.innerHTML="单元格"+i+"-"+j;
}
}

//为下面的删除表格功能实现，给当前表格添加一个id属性
//oTableNode.id="tableid";//法1
oTableNode.setAttribute("id", "tableid");//法2

document.getElementById("div1").appendChild(oTableNode);
}
</script>
行数:<input type="text" name ="rowNum"/>
列数:<input type="text" name = "colNum"><br/>
<input type="button" value="创建表格" onclick="createTable3();"><br/><br/>
<div id = "div1"></div><br/><br/>

行号<input type="text" name="rowNum2">
<input type="button" value="删除表格行" onclick="delrow();">   <br/>
列号<input type="text" name="colNum2">
<input type="button" value="删除表格列" onclick="delcol();">

<script type="text/javascript">
function delrow(){
var oTable = document.getElementById("tableid");
//判断
if(oTable==null){
alert("表格不存在");
return;
}
var rowNum2=parseInt(document.getElementsByName("rowNum2")[0].value);

if(isNaN(rowNum2)){
alert("行数格式错误");
return;
}
if(rowNum2>=1 && rowNum2<= oTable.rows.length){
oTable.deleteRow(rowNum2-1);
}else{
alert("要删除的行不存在!");
}
}

function delcol(){
var oTableNode = document.getElementById("tableid");
if(oTableNode==null){
alert("表格不存在!");
return;
}

var colNum2 = parseInt(document.getElementsByName("colNum2")[0].value);
if(isNaN(colNum2)){
alert("列号格式错误!");
return;
}
if(colNum2>=1 && colNum2<= oTableNode.rows[0].cells.length){
for(var i=0;i<oTableNode.rows.length;i++){
oTableNode.rows[i].deleteCell(colNum2-1);
}
}else{
alert("要删除的列不存在!");
}
}
</script>

</body>
</html>

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

标签： dhtml 表格

相关文章推荐

新的分享

章节导航