zoukankan      html  css  js  c++  java
  • js动态添加和删除标签

    html代码

    <h1>动态添加和删除标签</h1>
    <div id="addTagTest">
        <table>
            <thead><tr><th>姓名</th><th>年薪</th><th>操作</th></tr></thead>
            <tbody id="info">
                        
            </tbody>
        </table>
        姓名:<input type="text" name="userName" id="userName" value="" /><br>
        年薪<input type="text" name="money" id="money" value="" /><br>
        <button id="add" onclick="addTag()">添加记录</button>
    </div>

    js代码:

    第一种:动态添加和删除

    function addTag(){
        //获取值
        var userName=document.getElementById("userName").value;
        var money=document.getElementById("money").value;
        //创建元素
        var tr=document.createElement("tr");
        var td1=document.createElement("td");
        var td2=document.createElement("td");
        var td3=document.createElement("td");
        var a=document.createElement("a");
        //为元素的属性赋值
        td1.innerHTML=userName;
        td1.setAttribute("align","center");
        td2.innerHTML=money;
        td2.setAttribute("align","center");
        td3.setAttribute("align","center");
        a.innerHTML="删除";
        a.setAttribute("onclick","delRow(this)");
        //添加到页面中
        var info = document.getElementById("info");
        info.appendChild(tr);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        td3.appendChild(a);
    }
    //删除方法
    function delRow(o){
        //获取父元素
        var info = document.getElementById("info");
        //根据节点获取当前行
        var rowIndex = o.parentNode.parentNode.rowIndex;
        //删除一行
        info.deleteRow(rowIndex-1);
    }

    第二种:动态添加和删除(js集合)

    var list=[];//声明一个集合
    function addTag(){
        var userName=document.getElementById("userName").value;
        var money=document.getElementById("money").value;
        var obj=new Object();
        obj.name=userName;
        obj.money=money;
        list.push(obj);   //对象放入集合
        var info = document.getElementById("info");
        var inner="";
        //动态添加元素
        for(i=0;i<list.length;i++){
            inner+="<tr>";
            inner+='<td align="center">'+list[i].name+'</td><td align="center">'+list[i].money+
            '</td><td align="center"><a name="'+i+'" onclick="functiondel(this)">'+"删除"+'</a></td>';
            inner+="</tr>";
        }
        info.innerHTML=inner;
    }
    //删除方法
    function functiondel(o){
        var stack=[];//声明一个临时栈
        var index=o.name;
        for(k=list.length-1;k>=0;k--){
            if(k>index){
                stack.push(list[k]);
                list.pop();
            }
            else{
                list.pop();
                break;
            }
        }
        for(m=stack.length-1;m>=0;m--){
            list.push(stack[m]);
        }
        var info = document.getElementById("info");
        var inner="";
        for(i=0;i<list.length;i++){
            inner+="<tr>";
            inner+='<td align="center">'+list[i].name+'</td><td align="center">'+list[i].money+
            '</td><td align="center"><a name="'+i+'" onclick="functiondel(this)">'+"删除"+'</a></td>';
            inner+="</tr>";
        }
        info.innerHTML=inner;
    }
  • 相关阅读:
    构造函数初始化与赋值
    C代码中如何调用C++ C++中如何调用C
    C用函数指针模拟重载 C++重载
    【2019.10.30】意料之外的小黄衫——获得小黄衫感言
    【2019.10.30】SDN上机第1次作业
    【2019.10.17】十天Web前端程序员体验(软件工程实践第五次作业)
    【2019.10.07】《重生之我是程序员》
    【2019.09.30】“福大同好”——原型设计展示~
    【2019.09.30】构建之法《四五八章读后感》
    【2019.09.25】《构建之法》前三章读后感
  • 原文地址:https://www.cnblogs.com/lixiang1993/p/7244393.html
Copyright © 2011-2022 走看看