表格的删除与添加以及id的唯一性

最新推荐文章于 2024-06-28 10:00:00 发布
最新推荐文章于 2024-06-28 10:00:00 发布
阅读量112 收藏
点赞数
原文链接：http://www.cnblogs.com/itsmart/p/8047753.html
版权 
<!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>

 

转载于:https://www.cnblogs.com/itsmart/p/8047753.html

aihuobing7181
关注
mysql删除表的完整性约束条件_mysql表的完整性约束
weixin_35398720的博客
02-10 2154
概览约束是一种限制，通过对表的行或列的数据做出限制，来确保表的数据完整性和唯一性为了防止不符合规范的数据进入数据库，在用户对数据进行插入、修改、删除等操作时，DBMS自动按照一定的约束条件对数据进行监测，使不符合规范的数据不能进入数据库，以确保数据库中存储的数据正确、有效、相容。约束条件与数据类型的宽度一样，都是可选参数，主要分为以下几种：# NOT NULL ：非空约束，指定某列不能为空；# U...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
解决在mysql表中删除自增id数据后，再添加数据时，id不会自增1的问题
SXY的博客
11-25 1万+
问题：mysql表中删除自增id数据后，再添加数据时，id不会紧接。 比如： 自增id 1 2 3 4 现在删除4，就变成了 1 2 3 这时候，如果增加一条数据，会变成 1 2 3 5 上面5不是我们想要的结果，4才是理想的id， 解决方法是，在删除4之后，执行下面的sql语句： ALTER TABLE table_name AUTO_
MySQL数据库唯一性设置(unique index)
杨春建的博客
06-12 1万+
原文地址：https://blog.csdn.net/the4U/article/details/77187945我们知道在数据库设计中设置成主键的字段是不会重复的、唯一的，但如果有其他字段也需要保持唯一性应该如何设置呢？比如一个保存学生信息的表里要保证每条记录的学号都不同。这时候就需要对该字段设置唯一性。 设置唯一性后的字段，在数据库层面保证了该字段不会出现相同的值。下面说一下唯一性的设置方法：...
数据库字段唯一性约束设置（总结一）
tianshi1017的专栏
06-08 1万+
突然看到数据库表设计中的几个属性，记录一下 restrict--限制，指的是如果字表引用父表的某个字段的值，那么不允许直接删除父表的该值； cascade--级联，删除父表的某条记录，子表中引用该值的记录会自动被删除； no action--无参照完整性关系，有了也不生效。   在就是想到字段唯一性约束的添加     Mysql设置某字段唯一   1.建表时加上唯一性约束
jqgrid表格单行新增，单行编辑，单行删除
梦想家的跋涉
06-06 2926
前言 之前公司使用jqgrid的新增修改都是基于单条数据弹一个框进行插入/修改数据库后，返回表格进行刷新来实现的。 最近有一个需求想让直接在页面上进行编辑单条数据，新增直接新增在表格上进行操作然后保存。 查阅了jqgrid的api之后找到了如下方法： //新增行： $("#jqGrid").jqGrid("addRowData", id, dataRow, "first"); ...
【TabularData】DNN和表格数据分析建模综述
stay hungry, stay foolish
05-01 4816
论文年份：2021，论文被引：8（2022/04/30）
@entity意思和@id作用以及表格主键是什么意思
Torres_kai的博客
08-19 5788
对于我这种新学者来说，老师上课的很多东西并没有向你解释是什么意思，只是一笔带过，其实很多细节处我们这些新手都不是很明白，那么怎么办呢。以下就是我对我不理解的地方找网上或是自己总结的，仅供参考。 @entity 很多地方都会出现@entity的解释，有些解释很难理解，我看了许多解释后认为@Entity说明这个class是实体类，可以从数据库找到，如果没有它会帮你创建一个数据表的作用。 而@id的意思...
MySQL约束：主键、非空、唯一、外键 ️
沉淀、分享、成长，让自己和他人都能有所收获！
06-28 5万+
大家好，我是默语，擅长全栈开发、运维和人工智能技术。在这篇博客中，我将详细介绍MySQL中各种约束的使用，包括主键约束、非空约束、唯一约束和外键约束。这些约束是保证数据库完整性和数据一致性的关键。关键词：MySQL约束、主键、非空、唯一、外键、数据库设计。主键约束（Primary Key Constraint）用于唯一标识表中的每一行数据。一个表只能有一个主键，并且主键列中的值不能重复且不能为空。在这个示例中，user_id列被定义为主键，它将自动递增，并且每个用户的user_id都是唯一的。
mysql 添加约束_MySQL创建表并添加约束
weixin_28728715的博客
01-18 1759
MySQL创建表并添加约束常见的约束● 非空约束，not null● 唯一约束，unique● 主键约束，primary key● 外键约束，foreign key● 自定义检查约束，check(不建议使用)(在mysql中现在还不支持)非空约束，not null非空约束，针对某个字段设置其值不为空，如：学生的姓名不能为空。drop table if exists t_student;create...
js动态添加表格逐行添加、删除、遍历取值的实例代码
10-18
在处理Web前端交互时，经常会遇到需要动态地对表格进行操作的场景，如动态添加表格行、删除表格行、遍历表格取值等。本文将详细阐述如何使用JavaScript来实现这些功能，并给出具体的代码示例。 ### 动态添加表格行 ...
HTML中表格动态添加_动力节点Java学院整理
09-28
在本例中，`add`函数负责创建新的表格行并添加到表格中，而`del`函数负责根据行的ID来找到并删除对应的行元素。需要注意的是，在进行DOM操作时要确保操作的准确性，避免出现找不到元素或重复添加元素等问题。此外，...
vue动态添加删除表格数据特效源码.zip
11-01
删除功能通常与按钮元素结合，每个表格行末尾有一个删除按钮，按钮的点击事件会触发一个删除方法，如`deleteItem`。这个方法根据用户选择的数据项的唯一标识（如ID）从数组中移除对应对象，可以使用`Array.prototype...
JS实现向表格中动态添加行的方法
10-24
这里的ID是`myTable`，它是表格的唯一标识。 ```javascript var table = document.getElementById('myTable'); ``` 2. 使用`insertRow`方法添加新行：`insertRow`方法可以在表格中插入一个新行。它通常接受一个...
使用Bootstrap + Vue.js实现添加删除数据示例
10-20
首先，要实现一个添加删除数据的示例，我们需要引入几个关键的库文件，包括Bootstrap的CSS和JS文件、Vue.js库以及jQuery库。文章中提供了Bootstrap的在线资源链接，这是为了确保可以使用最新版本的Bootstrap框架，...
健身房管理系统代码系统 Springboot健身房管理系统（程序，中文注释）
最新发布
09-26
健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统-健身房管理系统 1、资源说明：健身房管理系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、M
海思SDK及大量官方PDF文档：hi3516dv100 和RTP示例工程代码：HisiLive
09-26
海思SDK及大量官方PDF文档：hi3516dv100 和RTP示例工程代码：HisiLive
电池镍片自动检测设备_三维3D设计图纸.zip
09-26
电池镍片自动检测设备_三维3D设计图纸.zip
小微园区数字化建设方案.pptx
09-26
小微园区数字化建设方案
jQuery动态表格插件：简化数据处理与验证
模板中需要特别注意序号（rownum class）的设置，确保唯一标识如radiobutton的name属性在每个td单元格中都不同，以及id属性需要使用{0}作为占位符以保证唯一性。此外，对于某些固定的、不可删除的行，可以设置fixed=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值