涉及到的知识点：

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)的更多相关文章

  1. 超级简单的jquery操作表格(添加/删除行、添加/删除列)

    利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...

  2. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  3. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  4. 利用javascript:void(0)制作假的提交按钮替代button

    在写html页面,我们很自然的在表单提交的地方采用button来作为提交按钮,但是,用<button type=”button”>按钮</button>作为提交代码会有个问题, ...

  5. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  7. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  8. 向DataGrid数据表格增加查询搜索框

    向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext. ...

  9. 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...

随机推荐

  1. 利用iOS原生系统进行人脸识别+自定义滤镜（GPUImage）

    人脸识别+滤镜效果(基于GPUImage实现的自定义滤镜) 最近碰到一个好玩的需求.说要客户端这边判定一下是否有人脸.在有的基础上.对相片做进一步的美化滤镜处理. 首先是人脸的识别判定; //将图片对 ...

  2. 窥探 Swift 之别具一格的 Struct 和 Class

    说到结构体和类,还是那句话,只要是接触过编程的小伙伴们对这两者并不陌生.但在Swift中的Struct和Class也有着令人眼前一亮的特性.Struct的功能变得更为强大,Class变的更为灵活.St ...

  3. 冷门PHP函数汇总

    概述 整理一些日常生活中基本用不到的PHP函数,也可以说在框架内基本都内置了,无需我们去自行使用的函数.量不多.后续在日常开发中如遇到更多的冷门,会更新本文章 sys_getloadavg 获取系统的 ...

  4. LightOJ - 1274 Beating the Dataset —— 期望

    题目链接:https://vjudge.net/problem/LightOJ-1274 1274 - Beating the Dataset    PDF (English) Statistics ...

  5. Buffer的数据存取

    缓冲区 存放要读取的数据 缓冲区 和 通道 配合使用 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与N ...

  6. canvas练习单个矩形形变

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Composer基础应用1

    先唠叨唠叨一些琐碎的事.本人最早从事.Net开发,后来处于好奇慢慢转到了php,因为.net从一早就使用了命名空间(反正从我使用就存在这玩意了),所以在转php时很自然的就使用了命名空间,但是在使用过 ...

  8. 单元测试：TESTNG和powermock的使用

    pom文件: <properties>        <testng.version>6.8</testng.version>        <powermo ...

  9. bzoj3513

    给定n个长度分别为$a_i$的木棒,问随机选择3个木棒能够拼成三角形的概率. $a_i$和$n$都在$10^5$以内 对于每一个i,我们统计比i短的边有多少组合能组成长度<=i的 用1减去这个概 ...

  10. 1072 Gas Station (30)（30 分）

    A gas station has to be built at such a location that the minimum distance between the station and a ...