<!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. VMware 虚拟机重启后获取不到ip的问题

    问题: VMware 虚拟机重启后获取不到ip,如图: 解决: 打开windows服务管理器,将VMware相关服务启动. 验证: 重启网络服务后,成功获取ip.

  2. Git学习笔记（二） · 非典型性程序猿

    远程库的使用 前面说到的都是git在本地的操作,那么实际协作开发过程中我们肯定是要有一个远程版本库作为项目的核心版本库,也就是投入生产使用的版本.这里我们以 Github为例.Github是一个开放的 ...

  3. OpenGL ES 学习笔记 - Overview - 小旋的博客

    移动端图形标准中,目前 OpenGL ES 仍然是比较通用的标准(Vulkan 则是新一代),这里新开一个系列用于记录学习 OpenGL ES 的历程,以便查阅理解. OverView OpenGL ...

  4. Linux Command Backup

    User Structure linux command review 列出所有信号 找到名字后,kill 或者用ps找到 kill同名进程 每隔一秒高亮显示网络链接数的变化情况 启动关闭制定网卡 关 ...

  5. WEB端缓存机制

    WEB端缓存机制 什么是WEB缓存 Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请 ...

  6. Hi3518_SDK

    第一章 Hi3518_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章 首次安装SDK 1.Hi3518 SDK包位置 在"Hi3518_V10 ...

  7. JAVA中对list map根据map某个key值进行排序

    package test; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; ...

  8. springboot利用swagger构建api文档

    前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...

  9. 基于google earth engine的中等分辨率全国水质反演

    我写博客的工作不像论文,假大空,我们直接上干货,之所以取一个这么大的名字,当然是我们能做到的... 不多说,我们对全国水体进行水质参数反演,不用MODIS,太粗,我们直接用哨兵,这样就可以直接做到大型 ...

  10. c语言之单向链表

    0x00 什么是链表 链表可以说是一种最为基础的数据结构了,而单向链表更是基础中的基础.链表是由一组元素以特定的顺序组合或链接在一起的,不同元素之间在逻辑上相邻,但是在物理上并不一定相邻.在维护一组数 ...