表格的删除与添加以及id的唯一性
<!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的唯一性的更多相关文章
- js实现在表格中删除和添加一行
<!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...
- js实现表格信息的删除和添加
制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...
- MYSQL 代码删除和添加表格列方法
一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ANDROID_MARS学习笔记_S02_012_ANIMATION_利用AnimationListener在动画结束时删除或添加组件
一.代码 1.xml(1)activity_main.xml <?xml version="1.0" encoding="utf-8"?> < ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)
前言 有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添 ...
- 刷新SQL Server所有视图、函数、存储过程 更多 sql 此脚本用于在删除或添加字段时刷新相关视图,并检查视图、函数、存储过程有效性。 [SQL]代码 --视图、存储过程、函数名称 DECLARE @NAME NVARCHAR(255); --局部游标 DECLARE @CUR CURSOR --自动修改未上状态为旷课 SET @CUR=CURSOR SCROLL DYNAMIC FO
刷新SQL Server所有视图.函数.存储过程 更多 sql 此脚本用于在删除或添加字段时刷新相关视图,并检查视图.函数.存储过程有效性. [SQL]代码 --视图.存储过程.函数名称 DE ...
- element-ui多层嵌套表格数据删除
很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...
随机推荐
- let和const区别
let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. const命令 const声明一个只读的常量.一旦声明,常量的值就不能改变.
- 你每天跑这么多自动化用例,能发现BUG吗?
阿里QA导读:为什么要度量测试有效性?这么多的CASE,花了大量时间和资源去运行,真能发现bug吗?CI做到90%的行覆盖率了,能发现问题吗?测试用例越来越多,删一些,会不会就发现不了问题了?怎么找出 ...
- javascript中变量命名规则
前言 变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你 ...
- IT从业者疫情之下出路何在
作为一个IT行业十年经历的从业人员,在北京大公司工作过,但因衡量着北京大都市的繁华下高消费和高房价,选择到二线城市发展和组建家庭,由此逃离北上广,结束了数年的北漂生涯.很荣幸到了二线城市顺利遇见属于自 ...
- Java入门教程四(字符串处理)
Java 语言的文本数据被保存为字符或字符串类型.字符及字符串的操作主要用到 String 类和 StringBuffer 类,如连接.修改.替换.比较和查找等. 定义字符串 直接定义字符串 直接定义 ...
- Solr查询配置及优化【eDisMax查询解析器】
一.简介 Lucene查询解析器语法支持创建任意复杂的布尔查询,但还有一些缺点,它不是用户查询处理的理想解决方案.这里面最大的问题是Lucene查询解析器的语法要求严格,一旦破坏就会抛出异常.指望用户 ...
- java基础进阶篇(二)_Arraylist ------【java源码栈】
前言 ArrayList 在开发中用到的频率很高,其中原生态提供的方法有一些很好用的重载版本,其中有的坑该跳得跳啊. 一.ArrayList的6种初始化方法1.构造方法 参数为空2.构造方法 参数为L ...
- czC#01
1. .net简介: .net分为.net平台及.net Framework 2..NET作用 2.转义与@ 3.类型转换 1) 隐式转换 2)显式类型转换 (待转换的目标类型)原始值
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- JDBC概述及编程步骤详解
目录 一.JDBC概述 二.JDBC编程步骤(以MySQL为例) 1.导入jar包 2.加载数据库驱动 3.通过DriverManager获得Connection对象 3.定义SQL语句 4.利用Co ...