<!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. let和const区别

    let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. const命令 const声明一个只读的常量.一旦声明,常量的值就不能改变.

  2. 你每天跑这么多自动化用例，能发现BUG吗？

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

  3. javascript中变量命名规则

    前言 变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你 ...

  4. IT从业者疫情之下出路何在

    作为一个IT行业十年经历的从业人员,在北京大公司工作过,但因衡量着北京大都市的繁华下高消费和高房价,选择到二线城市发展和组建家庭,由此逃离北上广,结束了数年的北漂生涯.很荣幸到了二线城市顺利遇见属于自 ...

  5. Java入门教程四(字符串处理)

    Java 语言的文本数据被保存为字符或字符串类型.字符及字符串的操作主要用到 String 类和 StringBuffer 类,如连接.修改.替换.比较和查找等. 定义字符串 直接定义字符串 直接定义 ...

  6. Solr查询配置及优化【eDisMax查询解析器】

    一.简介 Lucene查询解析器语法支持创建任意复杂的布尔查询,但还有一些缺点,它不是用户查询处理的理想解决方案.这里面最大的问题是Lucene查询解析器的语法要求严格,一旦破坏就会抛出异常.指望用户 ...

  7. java基础进阶篇(二)_Arraylist ------【java源码栈】

    前言 ArrayList 在开发中用到的频率很高,其中原生态提供的方法有一些很好用的重载版本,其中有的坑该跳得跳啊. 一.ArrayList的6种初始化方法1.构造方法 参数为空2.构造方法 参数为L ...

  8. czC#01

    1. .net简介: .net分为.net平台及.net Framework 2..NET作用 2.转义与@ 3.类型转换 1) 隐式转换 2)显式类型转换 (待转换的目标类型)原始值

  9. 前端每日实战：113# 视频演示如何用纯 CSS 创作一个赛车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...

  10. JDBC概述及编程步骤详解

    目录 一.JDBC概述 二.JDBC编程步骤(以MySQL为例) 1.导入jar包 2.加载数据库驱动 3.通过DriverManager获得Connection对象 3.定义SQL语句 4.利用Co ...