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;
}