关于表格——增加删除行，鼠标选定(利用JavaScript)
涉及到的知识点：
1、onmouseover,onmouseout
2、dom getElementByTagName
3、新建节点元素createElement;
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
var tr=document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++){
bgchange(tr[i]);
}
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
function bgchange(obj){
obj.onmouseover=function (){
obj.style.backgroundColor=" #f2f2f2";
}
obj.onmouseout=function (){
obj.style.backgroundColor="#fff";
}
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function add(){
var num=prompt('请输入学号','');
var name=prompt('请输入姓名','');
if (num!=null&&num!=''&&name!=null&&name!=''){
var newtr=document.createElement('tr');
newtr.innerHTML='<td>'+num+'</td>'+'<td>'+name+'</td>'+'<td><a href="javascript:;" onclick="removechild(this)">删除</a></td>'
var otc=document.getElementById("table").lastChild;
otc.appendChild(newtr);
}else{alert("请重新点击按钮输入");}
}
// 创建删除函数
function removechild(obj){
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="removechild(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="removechild(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
关于表格——增加删除行，鼠标选定(利用JavaScript)的更多相关文章
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- 利用javascript:void(0)制作假的提交按钮替代button
在写html页面,我们很自然的在表单提交的地方采用button来作为提交按钮,但是,用<button type=”button”>按钮</button>作为提交代码会有个问题, ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- 向DataGrid数据表格增加查询搜索框
向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext. ...
- 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
随机推荐
- PAT 甲级 1005. Spell It Right (20) 【字符串】
题目链接 https://www.patest.cn/contests/pat-a-practise/1005 思路 因为 n <= 10^100 所以 要用字符串读入 但是 100 * 100 ...
- linux下安装https证书
https://www.aliyun.com/jiaocheng/165422.html
- 吴恩达机器学习笔记（九） —— 异常检测(Anomaly detection)
主要内容: 一.模型介绍 二.算法过程 三.算法性能评估及ε(threshold)的选择 四.Anomaly detection vs Supervised learning 五.Multivaria ...
- zabbix 监控 haproxy 记录
1. 当配置好后,遇到 Value should be a JSON object. 该如何是好? sudo 文件增加: zabbix ALL=(ALL) NOPASSWD: ALL haproxy ...
- React之组件小析
组件就是标签,html的标签某种角度讲就是组件. index.js是项目的入口文件. react中大写字母开头的都是组件. App.js就是一个组件. ReactDOM会将组件内容,渲染到页面当中. ...
- Linux_服务器_06_VMware虚拟机下安装CentOS7.0图文教程
二.参考资料 1.VMware虚拟机下安装CentOS7.0图文教程
- <%!%>声明的变量和在<%%>中声明的变量的区别
通过写一个demo,查看Jsp_Servlet源码可知: <%!%>声明的变量是类似类的成员变量,<%%>中的变量是方法中的变量. 参考博客: http://www.cnblo ...
- listen 57
Secondhand Smoke Exposure Doubled Asthmatic Kids' Hospital Readmissions If your child has asthma哮喘, ...
- 【boost】使用serialization库序列化子类
boost.serialization库是一个非常强大又易用的序列化库,用于对象的保存与持久化等. 使用base_object可以在序列化子类的同时也序列化父类,以此获得足够的信息来从文件或网络数据中 ...
- APIO2018爆零记
Day1 集合 7点和yyc他们在学校简单的集合了一下 在大通道看到了整个年级来上操 嘲讽了一番就大摇大摆的走出了校门 校门口看无迟到周的权益部长lzj同学满眼的羡慕 2333 然后到了裕龙酒店登记入 ...