<!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. 你每天跑这么多自动化用例，能发现BUG吗？

    阿里QA导读:为什么要度量测试有效性?这么多的CASE,花了大量时间和资源去运行,真能发现bug吗?CI做到90%的行覆盖率了,能发现问题吗?测试用例越来越多,删一些,会不会就发现不了问题了?怎么找出 ...

  2. array, matrix, list and dataframe

    总结一下"入门3R"(Reading, 'Riting, 'Rrithmetic)中的读和写,不同的数据结构下的读写还是有点区别的. vector 命名 12 month.days ...

  3. 纯css3配合vue实现微信语音播放效果

    前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...

  4. PHP RFI 的小tip

    有关PHP include的帖子网上已经很多了,wooyun的知识库里面也有一篇总结的很好的文章,传送门:http://drops.wooyun.org/tips/3827,今晚在看书的时候看到RFI ...

  5. 一个很实用的css技巧简析

    我是小雨小雨,专注于更新有趣.实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注.点赞支持一下吧. ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个 ...

  6. Git pull 卡在Unpacking objects

    今天在拉取远程仓库的时候在Unpacking objects阶段 进度条卡住,不知道什么原因. 翻取相关资料搜索后得知:在拉取大型二进制对象(如Adobe Illustrator文件等)可能会使整个拉 ...

  7. 在idea下遇到的问题汇总（间接性更新）

    在idea下遇到的问题汇总(间接性更新) tomcat下的jsp代码问题: 在idea的环境下,遇到jsp代码.符号失效,首先需要考虑到jar包没有引入,情况如图: 这种情况是因为jar包没有导入进去 ...

  8. 使用Pods中使用Swift和Objective-C混编-编译不通过的原因

    iOS开发#使用Pods中使用Swift和Objective-C混编-编译不通过的原因-ld: symbol(s) not found for architecture arm64 问题基本描述 在P ...

  9. 分布式系统一致性问题与Raft算法（下）

    上一篇讲述了什么是分布式一致性问题,以及它难在哪里,liveness和satefy问题,和FLP impossibility定理.有兴趣的童鞋可以看看分布式系统一致性问题与Raft算法(上). 这一节 ...

  10. 【开发技巧】再见，BLE的那些坑！

    蓝牙,平常你用的多吗?上班路上戴着蓝牙耳机听音乐.看视频打开蓝牙分享个人热点给小伙伴们解锁共享单车时,打开蓝牙就能迅速解锁...... BLE-蓝牙低能耗技术,方便了我们的生活,但是开发者在开发过程中 ...