<!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. [PyTorch入门]之迁移学习

    迁移学习教程 来自这里. 在本教程中,你将学习如何使用迁移学习来训练你的网络.在cs231n notes你可以了解更多关于迁移学习的知识. 在实践中,很少有人从头开始训练整个卷积网络(使用随机初始化) ...

  2. lsync+rsync 实时同步(ubuntu16.04系统)

    1.同步端需要安装 lsync/rsyncapt-get install lsyncd rsync2.生成ssh公钥,粘贴到目标机器里面3.创建配置文件mkdir /etc/lsyncdcat /et ...

  3. 安卓权威编程指南-笔记（第21章 XML drawable）

    在Andorid的世界里,凡事要在屏幕上绘制的东西都可以叫drawable,比如抽象图形,Drawable的子类,位图图形等,我们之前用来封装图片的BitmapDrawable就是一种drawable ...

  4. golang 统计系统测试覆盖率

    golang 统计系统测试覆盖率 参考资料 https://www.elastic.co/blog/code-coverage-for-your-golang-system-tests https:/ ...

  5. PyMuPDF库（处理PDF）

    昨天在公司需要把一份PDF格式认证表转换为图片JPEG格式,所以在网上查询了一些与此相关的python库,最后看网上大多都是使用Wand和PyMuPDF,在安装了Wand库后,导入相应的模块后报错了, ...

  6. 《OneForAll框架搭建之旅》前端篇：微前端架构设计（Vue）

    心之所向,勇往直前!记录开发过程中的那些小事,给自己加点经验值. 前言 作为一个.Net后端开发,在竞争愈加激烈的当下,掌握点前端配菜好像已经是家常便饭了. 刚好在工作的第5个年头,辞去小主管职务的我 ...

  7. 一个基于Bootstrap实现的HMTL可视化编辑工具

    疫情禁足在家,用原生的JS实现了一个HTML可视化编辑工具,页面布局基于Bootstrap.大约一个月时间,打通主要技术关卡,实现了第一版:   可以拖放编辑,实现了几乎所有的bootstrap预定义 ...

  8. UVA - 10462 Is There A Second Way Left?

    题意: 给你一张无向图,让你判断三种情况:1.不是连通图(无法形成生成树)2.只能生成唯一的生成树 3.能生成的生成树不唯一(有次小生成树),这种情况要求出次小生成树的边权值和. 思路: 比较常见的次 ...

  9. Python实战之制作瘟疫传播实验

    2020年爆发新型冠状病毒,让大家在见证中国的团结也让大家感受到疫情传播的骇人 在这里先道一声“武汉加油.中国加油” 那么现在我们尝试制作一个模拟疫情爆发的模型,以数字的形式展现疫情爆发点恐怖. (1 ...

  10. Yuchuan_Linux_C 编程之十一 进程间通信

    一.整体大纲 二.进程间通信概念及方法  Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问,要交换 ...