关于表格——增加删除行，鼠标选定(利用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实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
随机推荐
- React Native 微信分享闪退的解决办法
Android中编写微信分享功能时出现了闪退的现象,经过几番资料的查找,发现是应用签名的问题,解决办法如下: 1. 进入微信官网的开放平台--->资源中心---->资源下载----& ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- matlab的数组
1.定义:同一类型的元素的集合. 2.生成:用[]创建,元素之间用逗号或者空格隔开. 第一例: >>a=[1,2,3,4] a = 1 2 3 4 注意,取矩阵的某几列,是这样a(:,2: ...
- dynamic 作为参数传入另一个程序集，获取值
dynamicOBJ.GetType().GetProperty("key").GetValue(dynamicOBJ, null)
- leetcode 110 Balanced Binary Tree(DFS)
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- 关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...
- PS 滤镜— — sparkle 效果
clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...
- 「LuoguP4180」 【模板】严格次小生成树[BJWC2010]（倍增 LCA Kruscal
题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图的次小生成树,而且这个次小生成树还得 ...
- 【Python】数组排序
1.numpy库:argsort() argsort函数返回的是数组值从小到大的索引值(升序排列) 一维: In [1]: import numpy as np In [2]: x = np.arra ...
- kindle3 破解字体
在万能的链接里下载kindle-fonts-4.4.N-k3.zip,update后kindle里出现linkfonts/fonts,这里就是存放字体的位置,字体格式需用.ttf. 在linkfont ...