技术标签： html5 前端 js html javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去除默认样式 */
*{
margin: 0;
padding: 0;
}
.myTable{
text-align: center;
margin: 20px auto;
padding: 20px;
}
</style>
<script>
window.onload = function() {
// 页面加载完之后加载js代码
function myOnclick() {
// 设置一个添加a标签onclick快速绑定事件的function
var As = document.getElementsByTagName("a");
for(var i = 0; i < As.length; i++) {
As[i].onclick = function() {
var name = this.parentNode.parentNode.children[0].innerHTML;
if(confirm("确认删除"+ name +"吗？")) {
this.parentNode.parentNode.remove();
}
}
}
}
myOnclick(); // 给所有a标签绑定onclick事件
var table = document.getElementById("table"); // 获取第一个表格table标签节点
var inputs = document.getElementsByTagName("input"); // 获取第二个表格的所有input标签节点
var btn = document.getElementById("btn"); // 获取添加button节点
btn.onclick = function() {
// 给添加button帮点onclick事件
confirm("确认添加吗?"); // 跳出弹框，与alert区别是可选择是与否
var tr = document.createElement("tr"); // 创建一个tr节点元素
for(var i = 0; i < inputs.length; i++) {
// 获取所有输入并且插入innerHTML
tr.innerHTML += "<td>" + inputs[i].value + "</td>"
}
tr.innerHTML += "<td><a href='javascript:;'>del</a></td>" // 添加一个操作标签
table.appendChild(tr); // 添加到当前tr的子节点尾部
myOnclick(); // 重新给当前a标签绑定onclick事件 注：这里可改进
}
}
</script>
</head>
<body>
<table class="myTable" border="1px" id="table">
<tr>
<th>姓名</th><th>班级</th><th>学号</th><th>操作</th>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
<td><a href="javascript:;">del</a></td>
</tr>
<tr>
<td>2</td><td>2</td><td>2</td>
<td><a href="javascript:;">del</a></td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
<td><a href="javascript:;">del</a></td>
</tr>
</table>
<table class="myTable" border="1px">
<tr><td colspan="2">添加</td></tr>
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>班级</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>学号</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<!-- 占两列 -->
<td colspan="2">
<button id="btn">添加</button>
</td>
</tr>
</table>
</body>
</html>
粘贴到html文件中即可运行。
在添加事件中有可改进的地方，可以自己尝试。
文章浏览阅读1.4k次。共享资源，欢迎转载：http://hbhuanggang.cublog.cn 一、移植环境主 机：VMWare--Fedora 9 开发板：Mini2440--64MB Nand,Kernel:2.6.30.4 编译器：arm-linux-gcc-4.3.2.tgz u-boot：u-boot-2009.08.tar.bz2二、移植步骤上接：u-boo
文章浏览阅读3.5k次。更改日志级别 在运行时中更改日志记录级别非常重要，这主要在生产环境中非常重要，在生产环境中，您可能希望在有限的时间内进行调试日志记录。 好了，更改根记录器非常简单–假设您有一个具有所需记录级别的输入参数，只需获取根记录器并通过输入记录级别进行设置，例如： Logger root = Logger.getRootLogger();//setting the logging leve..._typescript node 服务怎么修改日志级别
文章浏览阅读1.8w次，点赞2次，收藏12次。 在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小(resize)，浏览器页面滚动(scroll)，鼠标移动(mousemove)、文字输入(keyup)、 射击游戏中(mousedown、keydown)。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。 在项目中需要通过监听元素的scro..._vue中怎样对scroll事件进行监听并使用节流工具函数,最后在组件销毁时解绑该监听事
文章浏览阅读309次。实现一个函数判断year是不是润年#include <stdio.h>void leap_year(int i)//创建函数{ if (i % 4 == 0 && i % 100 == !0 || i % 400 == 0) { printf("是闰年\n"); } else { printf("不是闰年\n"); }}int main()..._编写一个函数判断year年份是否为闰年
文章浏览阅读2.3k次。我们还定义了两个 volumes，一个用于将本地的 /data/mysql 目录挂载到 MySQL 容器中的 /var/lib/mysql 目录上，另一个用于将当前目录（即 .）挂载到 Django 容器中的 /code 目录上。它们允许容器中的数据在容器停止和删除后仍然存在，并允许多个容器共享同一卷，使用数据卷可以使容器中的数据持久化，并且可以在多个容器之间共享相同的数据。MySQL 容器中的数据会被保存到本地的 /data/mysql 目录中，而 Django 容器中的代码会被保存到本地的当前目录中。_docker mount
文章浏览阅读530次。介绍本章以”BTN_0”事件为例, 使用input子系统向内核注册一个”BTN_0”的输入事件，然后通过定时器定时触发来模拟按键按下的操作；在应用层中通过注册输入事件来接收驱动发出的事件。整个过程不涉及硬件，只是介绍Input子系统的框架。 Input子系统基于cdev提供接口，属于字符设备，所有使用input子系统构建的设备都使用主设备号13，同时输入子系统也支持自动创建设备文件，这些文件..._linux btn_0
文章浏览阅读3.3w次，点赞76次，收藏458次。小跳蚤 大用途前言： 算一算时间又快到了一年一度的毕业设计了吧，我也差不多完成我自己的毕业设计一年了，在此推出我的毕业设计成果以供后来的学弟学妹参考。都说站在巨人肩膀上，更上一层楼，在枯燥的编程期间我也有参考CSND大力哥的文章。很多人 把毕业设计应付过去，但是学习终究是自己的，绝知此事要躬行。接下来跟着我学习和分析的思路看一下成果吧！目录第1章 引言.... 5..._基于安卓的跳蚤市场论文
文章浏览阅读685次，点赞4次，收藏14次。文章目录一、什么是 Arthas二、特性一览三、Arthas 能为你做什么？四、快速安装1、前提条件2、一键安装五、快速使用1、启动并连接进程六、使用示例1、dashboard（当前系统的实时数据面板）2、sysprop（查看或修改java属性）3、mbean（实时查看Mbean信息）4、thread（查看线程）5、thread -n(查看占CPU前几的线程栈信息)6、jad（反编译代码）7、sc（查看已经加载的类）8、sm（列出某个类加载的方法）9、trace（跟踪方法的消耗时间）10、stack （查看_[root@localhost ~]# ./as.sh arthas script version: 3.7.2 [info] java_home: /
文章浏览阅读3.8k次。opencv 入门笔记十 图片序列保存为视频_opencv将图片保存为视频
文章浏览阅读1.1w次。caffe中实现SSD准确率评价方法是TestDetection()函数。mAp指标值是每个类别的Average precision的平均值。本文分析DetectionEvaluateLayer中实现评价的过程及其评价指标。需要指出的是，一般的前向过程是不包含DetectionEvaluateLayer层的定义的，只有在训练的评价（TEST）过程中才会使用到该layer。具体使用该层时，需要在..._目标检测overlap
文章浏览阅读1.1k次。这是我纯手写的《Go语言入门》，手把手教你入门Go。源码+文章，看了你就会????！文章中所有的代码我都放到了github.com/GanZhiXiong/go_learning这个仓库中！看文章时，对照仓库中代码学习效果更佳哦！目录什么是单向通道声明单向通道time包中的单向通道关闭通道只读通道不能关闭给关闭通道发送数据将会触发panic从已关闭的通道接收数据时将不会发生阻塞测试题测试1支持????什么是单向通道单向通道就是只能用于写入或读取数据的通道。它是对通道的一种使用限制。如果ch_go单向chan
文章浏览阅读278次。Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分Springmvc处理流程入门程序springMVC是表现层框架，需要搭建web工程开发1、导入jar包2、加入配置文件创建SpringMVC的核心配置文件SpringMVC本身就是Spring的子项目，对Spring兼容性很好，不需要做很多配置。这里只配置一个Contr..._"在springmvc配置文件中,有如下配置: