关于表格——增加删除行，鼠标选定(利用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实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
随机推荐
- laravel登录后台500错误！
登录页面正常显示,填写完用户名密码 点登录后 页面一片空白,没有任何输出.debug可以看到一个500错误,preview和response都是空的.追踪了一下 发现在public/index.php ...
- Spring笔记04（DI（给属性赋值），自动装配（autowire））
给不同数据类型注入值: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...
- 1067 Bash 游戏v2
传送门 1067 Bash游戏 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人 ...
- Jenkins持续集成环境搭建
1部署Jenkins Jenkins部署很简单,只需建立一个新应用,将Jenkins的war包部署进去,再分配好权限就可以了. 1.1创建应用 建立一个新Nginx应用:jenkins.com 1.2 ...
- POJ2253(djkstra求最长最短边)
Frogger Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 32257 Accepted: 10396 Descrip ...
- Oracle获取日期的特定部分
(1)oracle中extract()函数从oracle 9i中引入,用于从一个date或者interval类型中截取到特定的部分 ,语法:extract ({ year | month | day ...
- bash 实现菜单
#!/bin/bash a=`ls /data1/chenggang5/kepler/cases` cat <<EOF `j=0;for i in $a;do let j=$j+1;if ...
- iOS ：undefined symbols for architecture x86_64
转自:http://www.th7.cn/Program/IOS/201408/268371.shtml 问题描述:为了适配iPhone 5s的64位处理器,在编译选项中加入了arm64架构.但是发现 ...
- maven 依赖范围
- selenium 点击页面链接测试
点击页面链接测试 http://www.51testing.com/html/21/n-862721.html 需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口 ...