DOM 创建表格 





caption    返回表格的标题对象
rows    返回该表格里的所有表格行(数组)
通过rows[index]返回表格指定的行所对应的属性：
cells    返回该表格行内所有的单元格组成的数组
通过cells[index]返回表格指定的列所对应的属性：
cellIndex    返回该单元格在表格行内的索引值






 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对表格元素进行增删改操作</title>
<script type="text/javascript" src="dom8.js"></script>
</head>

<body id="test"> 
<input type="button" value="创建一个5行4列的表格" onClick="create()">
<input type="button" value="删除最后一行" onClick="delrow()">
<input type="button" value="删除最后一个单元格" onClick="delCell()">
</body>
</html>






// JavaScript Document
//创建五行四列的表格
var table;
var body;
function create(){
    //创建table元素节点
     table=document.createElement("table");
    //设置属性
    table.border="1px";
    //获取body元素节点
    body=document.getElementsByTagName("body")[0];
    //将table标签添加至body
    body.appendChild(table);
    //循环插入五行
    for(var i=0;i<5;i++){
        var tr=table.insertRow(i);
        //插入四列
        for(var j=0;j<4;j++){
        var td=tr.insertCell(j);
            //添加文本节点
            td.innerHTML="第"+(i+1)+"行","第"+(j+1)+"列"
        }
    }
    
}
//删除一行表格
function delrow(){
    //判断table中是否还有tr
    if(table.rows.length>0){
        //获取最后一行tr的下标
    var index=table.rows.length-1;
    //删除最后一行
    table.deleteRow(index);
    }else{
        //所有行都被删除，最后删除table标签
        body.removeChild(table);
    }
    
}
//一列一列删除

function delCell(){
    //判断最后一行中是否还有有td
    if(table.rows[table.rows.length-1].cells.length>0){
        //获取最后一行tr下标
    var index=table.rows.length-1;
    //获取最后一行的最后一列的下标
    var index2=table.rows[index].cells.length-1;
    //删除最后一列
    table.rows[index].deleteCell(index2);
    }else{
        //删除最后一行
        table.deleteRow(table.rows.length-1);
    }
}




 






            

            
posted @ 
2020-08-25 08:11 
soda001 
阅读(481) 
评论(0) 
 
收藏 
举报