涉及到的知识点：

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. openocd+jlink为mini2440调试u-boot

    需要安装openocd,如果已经安装了系统默认的openocd(默认是0.5.0,版本太低),需要先卸载掉. 在安装前需要安装必需的一些库文件: -dev libusb-1.0-0 automake ...

  2. git创建与管理远程分支【转】

    本文转载自:http://blog.chinaunix.net/uid-9398085-id-3164754.html git创建与管理远程分支 1.远程分支就是本地分支push到服务器上的时候产生的 ...

  3. yii2 linux安装教程

    安装扩展 安装Yii最好的方式就是使用Composer安装,所以我们需要安装Composer,但是为了安装Composer,我们需要安装一下关于Composer和Yii2的许多扩展包,别担心下面的教程 ...

  4. erlang的map基本使用

    maps 适用于需要在运行时改变数据结构(record则不行)的场景,可以动态增加key 数据量不宜过大,具体多大没有实际数据, maps from_list  如果list表很长,则相应的耗时时间会 ...

  5. ivew组件的使用

    iview的官网:https://www.iviewui.com/docs/guide/start 1.选择快速上手 2.安装 解压,cmd,cd进你解压后的文件,cnpm i 3.打包 npm ru ...

  6. bzoj3513

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

  7. 1076 Forwards on Weibo (30)（30 分）

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...

  8. 【C】字符串常量和字符数组

    此次博客是转载某位博主的文章,不过现在找不到了,所以先声明一下. 先贴一段代码: #include <stdio.h> int main(int argc, const char** ar ...

  9. chronoy & NTP

    同步时间 配置文件中/etc/chrony.conf 里面指定: server master iburst keyfile /etc/chrony.keys commandkey 1 allow al ...

  10. bzoj 4310 跳蚤 —— 后缀数组+二分答案+贪心

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4310 二分答案——在本质不同的子串中二分答案! 如果二分到的子串位置是 st,考虑何时必须分 ...