• 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

      
  • 相关阅读:
    matlab 动态绘图保持figure不变
    ucos-ii在ti dsp 28377芯片上的运行过程和移植过程
    关于ucos_ii 就绪表的理解
    dsp 28377在线升级 实例总结
    关于DSP的boot mode / boot loader /上电顺序 /在线升级等问题的总结
    开源看板wekan docker 源码构建
    开源看板 wekan windows 环境下 离线部署
    公司内网两台电脑无法ping通的问题
    excle 根据单位、岗位、成绩 等排名
    python爬虫学习:从数据库读取目标爬虫站点及爬虫规则,批量爬取目标站点指定数据(scrapy框架)
  • 原文地址:https://www.cnblogs.com/ckui/p/6096264.html
Copyright © 2020-2023  润新知