基于JavaScript的表格设计：按序添加或删除班级的学生信息
目的：
制作一个表格，显示班级的学生信息
功能：
鼠标移到不同行，背景色发生改变，离开恢复原背景色
添加、删除按钮，可添加，可删除。
程序流程：
首先先建立绑定事件函数。
其次建立鼠标移动改变背景色函数。
再编写添加行和列函数。
最后编写删除函数。
HTML部分：
<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:;" >删除</a></td>
</tr > <tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" >删除</a></td>
</tr> </table>
<input type="button" value="添加一行" onclick="add()" />
JS部分：
绑定事件函数：
window.onload = function()
{
var tr=document.getElementsByTagName("tr")//获取所有表格的行标签，得到一个tr数组
for(var i=0;i<tr.length;i++)
{
bgcChange(tr[i]); //对每一个tr执行一个绑定事件
}
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景
}
改变背景色函数：
function bgcChange(obj)
{
obj.onmouseover=function()
{
obj.style.backgroundColor="#f2f2f2";//当鼠标覆盖时，改背景色为#f2f2f2
}
obj.onmouseout=function()
{
obj.style.backgroundColor="#fff";//当鼠标离开时，恢复背景色
}
}
添加行和列函数：
var num=2;
function add()
{
num++;
var tr=document.createElement("tr");//num每加一次建立一个行标签，存在tr数组里面
var xh=document.createElement("td");//num每加一次建立一个列标签，存在xh数组里面
var xm=document.createElement("td");//num每加一次建立一个列标签，存在xm数组里面
xh.innerHTML="xh00"+num; // 给学号列添加元素内容xh00num
xm.innerHTML="学生"+num;//给姓名列添加元素内容第num学生
var del=document.createElement("td");//num每加一次，建立一个列标签，存在del数组里面
del.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>"; //给第三列添加删除列
var tab=document.getElementById("table"); //获取id=table的元素 存放在tab数组里面
tab.appendChild(tr); //向id=table的元素添加子节点，节点对象为tr
tr.appendChild(xh); //在添加行的同时，也添加学号列
tr.appendChild(xm); //在添加行的同时也添加姓名列
tr.appendChild(del); //在添加行的同时也添加删除列
var tr=document.getElementsByTagName("tr"); //获取所有表格的行标签，得到一个tr数组
for(var i=0;i<tr.length;i++)
{
bgcChange(tr[i]); //循环 对每一个行标签执行一个绑定事件
}
}
删除函数：
function del(obj) //obj是函数调用时的this this指的是<a>不是<td>,等于说obj指的是<a>,所以obj.parentNode.parentNode 是<tr> 然后tr.parentNode.removeChild(tr)是<table> 然后再removeChild(tr) 就是<table>移除<tr>.
{
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
基于JavaScript的表格设计：按序添加或删除班级的学生信息的更多相关文章
- javascript数组在指定位置添加和删除元素
在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...
- JavaScript元素的创建、添加、删除
<script> var x=document.getElementById("p2"); var obj=document.createElement("p ...
- JS-表格数据的添加与删除、搜索
<!doctype html><html><head><meta charset="utf-8"><title>JS练习 ...
- Django实现简单的用户添加、删除、修改等功能
一. Django必要的知识点补充 1. templates和static文件夹及其配置 1.1 templates文件夹 所有的HTML文件默认都放在templates文件夹下. 1.2 stati ...
- Java课程设计---学生信息管理系统需求分析及总体设计
按照软件工程实践的原则,开发大型程序需要经历需求分析.总体设计.详细设计.编码实现.系统测试.系统维护等几个阶段. 1.需求分析 本阶段是整个软件开发过程中最重要的环节.通过了解实际运行的系统或与用户 ...
- Javascript DOM 03 表格添加、删除 + 搜索
获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用 ...
- 利用javascript动态向网页中添加表格
效果图如下: 以下是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)
AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. Ava ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- 如何解决Mybatis 日期查询时后面带.0
关于如何解决Mybatis 日期查询时后面带.0 MySQL数据库: 直接在MySQL查询语句中解决: SELECT T.ID, T.USERNAME, DATE_FORMAT(t.birthda ...
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- 获取网页js代码的一个方法
这个是看了别人的代码,稍加修改而成的.怕时间长忘了,在这里记一笔: console.log(require(["foo:bar.js"]).prototype.someMethod ...
- 数据恢复----重组raid5解析
重组Raid5 第一步:判断RAID5条带大小 利用winhex同时打开6个物理镜像每块成员盘中的$MFT文件记录(16进制搜索“46494c45”),并且保证找到的文件记录在每块物理盘的同一扇区(在 ...
- 从ReentrantLock详解AQS原理源码解析
数据结构 java.util.concurrent.locks.AbstractQueuedSynchronizer类中存在如下数据结构. // 链表结点 static final class Nod ...
- 非确定性有穷状态决策自动机练习题Vol.3 D. Dp搬运工3
非确定性有穷状态决策自动机练习题Vol.3 D. Dp搬运工3 题目描述 给定两个长度为 \(n\) 的排列,定义 \(magic(A,B)=∑_{i=1}^nmax(Ai,Bi)\) . 现在给定 ...
- C# 监听值的变化
1.写一个监听值变化的类 public class MonitorValueChange { private Visibility myValue; public Visibility MyValue ...
- java基础-02：编译型和解释型
Java程序运行机制: Java语言的编译-->解释-->运行过程 1.编译型语言:程序在执行之前需要一个专门的编译过程,把程序编译成为机器语言的文件,运行时不需要重新翻译,直接使用编译的 ...
- JavaScript学习系列博客_4_JavaScript中的数据类型
JavaScript中有6种数据类型 一.基本数据类型 - String 字符串 JS中的字符串需要使用引号引起来双引号或单引号都行 但是要注意的是某种引号嵌套使用的话,需要加上 \ 转义.比如说我们 ...
- linux上的deepin-qq不能显示图片解决方法
在贴吧发现的一个方法 在终端输入以下命令,重新打开QQ即可 sudo sysctl -w net.ipv6.conf.all.disable_ipv6=1 sudo sysctl -w net.piv ...