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