首页 > 其他 > 详细

DOM 创建表格

时间:2020-08-25 09:28:08      阅读:68      评论:0      收藏:0      [点我收藏+]

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);
    }
}

 

DOM 创建表格

原文:https://www.cnblogs.com/soda001/p/13557700.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!