您的位置：首页 > 其它

DOM（二）-10-(示例-删除表格的行和列)

2015-08-20 17:07 330 查看
表格样式table.css代码
@CHARSET "UTF-8";

table{
border:##249bdb 1px solid;
width:500px;
border-collapse:collapse;
}

table td{
border:#249bdb 1px solid;
padding:5px;/*td左边顶格*/
}
主程序代码
<!--
添加新功能：删除表格的行和列操作
打开DHMTL API文档，找到里面的table对象，其内有方法：

（1）deleteRow：从表格及 rows 集合中删除指定行(tr)。
语法：object.deleteRow( [iRowIndex])
传入角标，删除指定的行

【特别注意】角标是从0开始的，即表格第一行对应角标0，第二行对应1，第三行对应2……
-->

<html>
<head>
<style type="text/css">
@import url(table.css);
</style>
</head>
<body>
<script type="text/javascript">

function createTable(){

var oTabNode = document.createElement("table");

//设置表格名称，为了后续删除行和删除列function中先对表格是否存在进行判断
oTabNode.setAttribute("id","tableid");//该方法类似oTabNode.id = "tableid";

var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
var colVal = parseInt(document.getElementsByName("colnum")[0].value);

for(var x=1;x<=rowVal;x++){

var oTrNode = oTabNode.insertRow();

for(var y=1;y<=colVal;y++){

var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x + "--" + y;

}

}

document.getElementsByTagName("div")[0].appendChild(oTabNode);

document.getElementsByName("crtBut")[0].disabled = true;

}

//定义删除行事件处理办法

function delRow(){

//获取表格对象
var oTabNode = document.getElementById("tableid");

//先判断表格是否存在，如果不存在，还删除什么东西
if(oTabNode == null){

alert("表格不存在！");
return;
}

//获取要删除的表格的行数
var rowVal_del = parseInt(document.getElementsByName("delrow")[0].value);

//删除指定的行，这里需要健壮性判断，即判断用户输入的要删除的行是否有效的，即若3行表格，输入的数字是否在1-3之间

if(rowVal_del<=1 && rowVal_del<=oTabNode.rows.length){
/*
*oTabNode是当前被操作的表格节点，其有个属性叫做rows，即拿到所有行，然后lenght是一共有几行
*/

oTabNode.deleteRow(rowVal_del-1);
/*
*【切记】这里必须减1，符合用户习惯，因为deleteRow方法传入的角标是从0开始计数的。
*比如rowVal_del=3，那么3-1=2，所以deleteRow(2)，那么在实际操作中角标2对应的行是第三行，这样
*就实现了用户传入几就删除第几行。
*/
}else{

alert("要删除的行不存在！");
}

}

//定义删除列事件处理办法：【特别注意思想】删除列，其实就是删除每一行中同一位置的单元格，因为没有直接删除列的方法

function delCol(){

var oTabNode = document.getElementById("tableid");

if(oTabNode == null){

alert("表格不存在！");

return;
}

//获取用户输入的数字（要删除的列）

var colVal_del = parseInt(document.getElementsByName("delcol")[0].value);

//删除列操作，既然是删除每行的同一位置的单元格，那么需要先遍历所有行，然后删除同一位置的单元格

//【切记】健壮性判断（理由同上面的删除行function，详情查阅DHTML API文档）
if(colVal_del>=1 && colVal_del<=oTabNode.rows[0].cells.length){
//oTabNode是当前被操作的表格节点，rows[0]是拿到第一行，cells是拿到该行的所有单元格，length是该行单元格总数，即oTabNode的列数

for(var x=0;x<oTabNode.rows.length;x++){//遍历所有行

oTabNode.rows[x].deleteCell(colVal_del-1);//拿到第x行，删除该行指定单元格
//调用deleteCell方法删除每行同一位置单元格，【注意】减1
}
}else{

alert("要删除的列不存在！");

}

}

</script>

行数：<input type="text" name="rownum" /> 列数：<input type="text" name="colnum" />

<input type="button" value="创建表格" name="crtBut" onclick="createTable()" />

<hr/>

删除第<input type="text" name="delrow" />行 <input type="button" value="删除行" onclick="delRow()" /><br/>
删除第<input type="text" name="delcol" />列 <input type="button" value="删除列" onclick="delCol()" />

<hr/>

<div></div>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航