涉及到的知识点：

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 开发实践之 Auto Layout

    原:http://xuexuefeng.com/autolayout/?utm_source=tuicool 本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自 ...

  2. Android Wifi简单的梳理【转】

    本文转载自:http://blog.csdn.net/gabbzang/article/details/10005411 代表一个已经配置过的网络.包含网络ID(networkId).该网络ID代表的 ...

  3. 51Nod 1515 明辨是非 —— 并查集 + 启发式合并

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1515 1515 明辨是非  题目来源: 原创 基准时间限制:1 ...

  4. linux下安装svn服务

    环境centos6.8 64位: 1.安装svn yum install subversion yum install mod_dav_svn 2.创建svn仓库 mkdie /home/svn 3. ...

  5. matlab的数组

    1.定义:同一类型的元素的集合. 2.生成:用[]创建,元素之间用逗号或者空格隔开. 第一例: >>a=[1,2,3,4] a = 1 2 3 4 注意,取矩阵的某几列,是这样a(:,2: ...

  6. 单页导航菜单视觉设计HTML模板

    单页导航菜单视觉设计HTML模板,视觉,企业,html,单页,单页导航菜单视觉设计HTML模板是一款磨砂背景的大气时尚HTML设计网页模板 http://www.huiyi8.com/moban/

  7. ffmpeg截取视频

    ffmpeg -i ./suen071520.mp4 -vcodec copy -acodec copy -ss 00:55:00 -to 01:14:50 ./suen071520sp3.mp4-- ...

  8. Mac使用记录

    ---恢复内容开始--- brew list //查看brew安装东东 ls //当前目录下内容 brew --cache //查看brew下载目录 /usr/local/Cellar/ //隐藏文件 ...

  9. timing-function: steps()

    animation语法 animation:name duration timing-function delay iteration-count direction timing-function取 ...

  10. phpstorm 代码按列对齐

    设置方式: Preference... -> Editor -> CodeStyle -> PHP -> Other -> Align key-value pairs