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; }
不想学好基础的程序员不是好的程序员。