<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script>

    window.onload=function(){

        var oTab=document.getElementById("tab1");

        var oName=document.getElementById("name");

        var oAge=document.getElementById("age");

        var oBtn=document.getElementById('btn1');

        var id=oTab.tBodies[0].rows.length+1;

        oBtn.onclick=function(){

            var oTr=document.createElement('tr');

            var oTd=document.createElement('td');

            oTd.innerHTML=id++;

            oTr.appendChild(oTd);

            var oTd=document.createElement('td');

            oTd.innerHTML=oName.value;

            oTr.appendChild(oTd);

            var oTd=document.createElement('td');

            oTd.innerHTML=oAge.value;

            oTr.appendChild(oTd);

            var oTd=document.createElement('td');

            oTd.innerHTML="<a href='javascript:;'>删除</a>";

            oTr.appendChild(oTd);

            oTd.getElementsByTagName('a')[0].onclick=function(){

                oTab.tBodies[0].removeChild(this.parentNode.parentNode);

            }

            oTab.tBodies[0].appendChild(oTr);

        }

    }

</script>

</head>

<body>

姓名：<input type="text" id="name">

年龄：<input type="text" id="age">

<input type="button" value="添加" id="btn1">

     <table id="tab1" border='1' width="500px">

        <thead>

            <td>ID</td>

            <td>姓名</td>

            <td>年龄</td>

            <td>操作</td>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>12</td>

                <td></td>

            </tr>

            <tr>

                <td>2</td>

                <td>李四</td>

                <td>34</td>

                <td></td>

            </tr>

            <tr>

                <td>3</td>

                <td>王五</td>

                <td>40</td>

                <td></td>

            </tr>

            <tr>

                <td>4</td>

                <td>李四</td>

                <td>34</td>

                <td></td>

            </tr>

            <tr>

                <td>5</td>

                <td>王五</td>

                <td>40</td>

                <td></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

表格的删除与添加以及id的唯一性的更多相关文章

  1. js实现在表格中删除和添加一行

    <!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...

  2. js实现表格信息的删除和添加

    制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...

  3. MYSQL 代码删除和添加表格列方法

    一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...

  4. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  5. 基于jQuery表格增加删除代码示例

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

  6. ANDROID_MARS学习笔记_S02_012_ANIMATION_利用AnimationListener在动画结束时删除或添加组件

    一.代码 1.xml(1)activity_main.xml <?xml version="1.0" encoding="utf-8"?> < ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统（82）-Easyui Datagrid批量操作（编辑，删除，添加）

    前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...

  8. 刷新SQL Server所有视图、函数、存储过程 更多 sql 此脚本用于在删除或添加字段时刷新相关视图，并检查视图、函数、存储过程有效性。 [SQL]代码 --视图、存储过程、函数名称 DECLARE @NAME NVARCHAR(255); --局部游标 DECLARE @CUR CURSOR --自动修改未上状态为旷课 SET @CUR=CURSOR SCROLL DYNAMIC FO

    刷新SQL Server所有视图.函数.存储过程 更多   sql   此脚本用于在删除或添加字段时刷新相关视图,并检查视图.函数.存储过程有效性. [SQL]代码 --视图.存储过程.函数名称 DE ...

  9. element-ui多层嵌套表格数据删除

    很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...

随机推荐

  1. appium ios真机自动化环境搭建&运行（送源码）

    appium ios真机自动化环境搭建&运行(送源码) 原创: f i n  测试开发社区  6天前 Appium测试环境的搭建相对比较烦琐,不少初学者在此走过不少弯路 首先是熟悉Mac的使用 ...

  2. Linux USB 鼠标驱动程序详解（转）

    Linux USB 鼠标驱动程序详解 USB 总线引出两个重要的链表!一个 USB 总线引出两个重要的链表,一个为 USB 设备链表,一个为 USB 驱动链表.设备链表包含各种系统中的 USB 设备以 ...

  3. ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  4. Vue源码之数据驱动（个人向）

    #1.大致流程 # 2.具体流程 数据驱动 New VUE Where:src/core/instance/index.js Do: 1.使用Function实现Vue类 2.调用_init 初始化V ...

  5. Cenots 7 通过Yum 安装Node.js 报错问题

    环境:CentOS Linux release 7.3.1611 (Core) 安装报错信息: [cenots7@localhost ~]$ sudo yum -y install npm Loade ...

  6. js操作复选框

    js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...

  7. hue初识

    Hue Web应用的架构 Hue 是一个Web应用,用来简化用户和Hadoop集群的交互.Hue技术架构,如下图所示,从总体上来讲,Hue应用采用的是B/S架构,该web应用的后台采用python编程 ...

  8. 系统级编程（csapp）

    系统级编程漫游 系统级编程提供学生从用户级.程序员的视角认识处理器.网络和操作系统,通过对汇编器和汇编代码.程序性能评测和优化.内存组织层次.网络协议和操作以及并行编程的学习,理解底层计算机系统对应用 ...

  9. 用canvas实现简单的下雪效果

    首先新建一个html文件,将body的背景设置为天空的那种深蓝色,并创建一个canvas,canvas的操作逻辑都放在snow.js中: <!DOCTYPE html> <head& ...

  10. html建立大众点评页面遇到的问题

    大众点评所用知识 HTML.CSS.bootstrap3 遇到的问题 因图片无法对齐 源码:抛弃div改用img后成功对齐 解决后成功对齐 源码: 导航栏文本无法右对齐. 我想到的方法是: div{ ...