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

js动态添加和删除标签的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. jquery-ui-bootstrap动态添加和删除标签页封装【效果更炫】

    1.效果图 2.导入js和css <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css& ...

  3. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

  4. 使用js页面添加或删除标签

    // 添加var container = document.getElementById('divAudio');container.appendChild(audio); // 删除var cont ...

  5. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  6. JS实现动态添加和删除div

    实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...

  7. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  8. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SSH配置免秘钥登录

    一.  SSH 配置免秘要登录 配置SSH 免秘要登录,虽然就那么几步,但总是会出现点小问题,今天就做下记录.SSH 免秘钥就是让两台机器相互信任,不需要输入密码就能相互登录.配置相互信任就是把各自的 ...

  2. hdu 4262(线段树)

    题目:有一个圈,可以从某个位置取球,给出原有的顺序,有三种操作,左旋一次,右旋一次,取球,要求按顺序取球,问需要操作多少次 显然操作是确定的,每次将目标球旋转过来,找出左旋和右旋操作少的,然后取球. ...

  3. 《从零开始学Swift》学习笔记(Day 9)——离开表达式你试试!

    原创文章,欢迎转载.转载请注明:关东升的博客 表达式啊是很重要地. 在Swift中,表达式有3种形式. 不指定数据类型 var a1 = 10 指定数据类型 var a1:Int  = 10 使用分号 ...

  4. 【转】NPOI读写Excel

    1.整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet:行:Row:单元格Cell. 2.NPOI是POI的C#版本,NPOI的行和列的index都是从0开始 ...

  5. 以层的观点思考各个nginx的log位置

    问题 做代理服务器时候,自身的log.被代理的服务器的log 回答 以层的观点思考这个问题 各层的日志落在各层

  6. MySQL中有关icp mrr和bka的特性

    文辉考我的问题,有关这三个的特性,如果在面试过程中,个人见解可以答以下 icp MyQL数据库会在取出索引的同时,判断是否进行WHERE条件过滤,也就是把WHERE的部分过滤操作放在存储引擎层,在某些 ...

  7. boost之正则表达式

    正则表示主要用于查找一系列符合规则的对象,而我们之前的查找是对某一特定的字符串进行查找. #include <iostream> #include <vector> #incl ...

  8. MySQL的SQL MODE

    SQL MODE:定义mysqld对约束等的响应行为:    查看当前模式:        mysql> SHOW GLOBAL VARIABLES LIKE 'sql_mode';    修改 ...

  9. 2.6 基于ARDUINO UNO+MC20的路径显示功能

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  10. python常用模块——os模块

    python编程时,经常和文件.目录打交道,这就离不开os模块,os模块包含普遍的操作系统功能,与具体的平台无关,列举一些常用的命令. 1.os.name:字符串指示你正在使用的平台.windows是 ...