码迷,mamicode.com
首页 > Web开发 > 详细

js动态添加和删除标签

时间:2017-07-27 14:26:06      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:break   index   属性   log   center   table   code   操作   username   

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动态添加和删除标签

标签:break   index   属性   log   center   table   code   操作   username   

原文地址:http://www.cnblogs.com/lixiang1993/p/7244393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!