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");
    //為元素的屬性賦值
    td1.innerHTML=userName;
    td1.setAttribute("align","center");
    td2.innerHTML=money;
    td2.setAttribute(
 
"align","center");
    var info = document.getElementById("info");
    //添加到頁面中
    info.appendChild(tr);
    tr.appendChild(td1);
    tr.appendChild(td2);
}        

第二種：動態添加和刪除（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;
}

js動態添加和刪除標簽