javascript动态添加删除表格

一、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

　　

posted on 2016-11-24 01:59  wantcrazy  阅读(1429)  评论(0)  编辑  收藏  举报

导航