javascript动态添加删除表格

时间：2016-11-24 09:13:57 阅读：158 评论：0 收藏：0 [点我收藏+]

标签：sheet 语言 link 移动 gif move ref cli remove

一、DOM= Document Object Model，文档对象模型。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。

　　通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

二、获取标签对象的方式

　　document.getElementById("id");

　　document.getElementsByTags("标签名");

　　document.getElementsByName("name");

三、在 HTML DOM (Document Object Model) 中, 每个东西都是节点:

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

四、

<!DOCTYPE html>
<html>
<head>
<title>tablel.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
    .btn{
        height：50px;
        background-color:#b61d1d;
    }
</style>
<script type="text/javascript">
        function createTable(){
            var table = document.createElement("table");
            table.setAttribute("border", "1px");
            table.setAttribute("cellpadding", "0px");
            table.setAttribute("cellspacing", "0px");
            table.setAttribute("width", "1000px");
            
            for(var j = 1; j <= 2; j++){
                var tr = document.createElement("tr");
                tr.setAttribute("height", "10");
                tr.setAttribute("align", "center");
                for(var i = 1; i <= 3; i++){
                    var td = document.createElement("td");
                    tr.appendChild(td);
                    //创建文本内容
                    var text = document.createTextNode(i);
                    //将文本添加到td中
                    td.appendChild(text);
                }
                table.appendChild(tr);
            }
            var body= document.getElementsByTagName("body")[0];
            body.appendChild(table);
            
            var btns = ["添加","删除"];
            for(var index in btns){
                var text = btns[index];
                var button = document.createElement("input");
                button.setAttribute("type", "button");
                if(text=="添加"){
                    button.setAttribute("onclick", "add();");
                    button.setAttribute("class","btn");                    
                }else{
                    button.setAttribute("onclick","sub();");
                    button.setAttribute("class","btn");
                }
                button.setAttribute("value", text);
                body.appendChild(button);
            }
        }
        function add(){
                var table = document.getElementsByTagName("table")[0];
                var tr = document.createElement("tr");
                tr.setAttribute("height", "10");
                tr.setAttribute("align", "center");
                for(var i = 1; i <= 3; i++){
                    var td = document.createElement("td");
                    tr.appendChild(td);
                    //创建文本内容
                    var text = document.createTextNode(i);
                    //将文本添加到td中
                    td.appendChild(text);
                }
                table.appendChild(tr);
        }
        function sub(){
            var table = document.getElementsByTagName("table")[0];
            table.removeChild(table.lastChild);
        }
    </script>
</head>

<body onload="createTable()">

</body>
</html>

View Code

五、

技术分享

六、HTML DOM对象的属性和方法

http://www.runoob.com/jsref/dom-obj-all.html

javascript动态添加删除表格

标签：sheet 语言 link 移动 gif move ref cli remove

原文地址：http://www.cnblogs.com/ckui/p/6096264.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行