javascript动态添加删除表格

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

　　

以上是关于javascript动态添加删除表格的主要内容，如果未能解决你的问题，请参考以下文章

javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

js动态添加表格

JS动态添加删除表格数据

javascript添加或者删除table表格行代码实例

ViewPager2 无法动态添加删除片段

javascript 动态删除数组