目的：

制作一个表格，显示班级的学生信息

功能：

鼠标移到不同行，背景色发生改变，离开恢复原背景色

添加、删除按钮，可添加，可删除。

程序流程：

首先先建立绑定事件函数。

其次建立鼠标移动改变背景色函数。

再编写添加行和列函数。

最后编写删除函数。

　　　　　　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的表格设计：按序添加或删除班级的学生信息的更多相关文章

  1. javascript数组在指定位置添加和删除元素

    在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...

  2. JavaScript元素的创建、添加、删除

    <script> var x=document.getElementById("p2"); var obj=document.createElement("p ...

  3. JS-表格数据的添加与删除、搜索

    <!doctype html><html><head><meta charset="utf-8"><title>JS练习 ...

  4. Django实现简单的用户添加、删除、修改等功能

    一. Django必要的知识点补充 1. templates和static文件夹及其配置 1.1 templates文件夹 所有的HTML文件默认都放在templates文件夹下. 1.2 stati ...

  5. Java课程设计---学生信息管理系统需求分析及总体设计

    按照软件工程实践的原则,开发大型程序需要经历需求分析.总体设计.详细设计.编码实现.系统测试.系统维护等几个阶段. 1.需求分析 本阶段是整个软件开发过程中最重要的环节.通过了解实际运行的系统或与用户 ...

  6. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  7. 利用javascript动态向网页中添加表格

    效果图如下: 以下是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  8. 基于WPF系统框架设计(5)-Ribbon整合Avalondock 2.0实现多文档界面设计(二)

    AvalonDock 是一个.NET库,用于在停靠模式布局(docking)中排列一系列WPF/WinForm控件.最新发布的版本原生支持MVVM框架.Aero Snap特效并具有更好的性能. Ava ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. HotSpot的垃圾回收算法

    这系列文章只简单介绍一下HotSpot垃圾回收中涉及到的算法及相关的垃圾回收器,并不进行源代码分析,后面会开一个系列对HotSpot的垃圾回收以及内存管理进行源代码解读. 涉及到的垃圾回收算法一共有 ...

  2. PAT 2-09. 装箱问题模拟（20）

    题目链接 :http://www.patest.cn/contests/ds/2-09 解题思路:直接模拟, 记录已经使用的箱子的剩余容量, 如果已经使用的箱子中没有可以放下物品的箱子, 在增加另一个 ...

  3. SpringBoot中Mybatis打印sql日志

    application.yml中加上 # springBoot+Mybatis 控制台打印SQL语句 (方式一) logging: level: com.zoctan.api.mapper : deb ...

  4. Java面试通关要点汇总整理

    简历篇 请自我介绍 请介绍项目 基础篇 基本功 面向对象的特征 final, finally, finalize 的区别 int 和 Integer 有什么区别 重载和重写的区别 抽象类和接口有什么区 ...

  5. Solon详解（六）- 定制业务级别的验证注解

    在业务的实现过程中,尤其是对外接口开发,我们需要对请求进行大量的验证并返回错误状态码和描述.lombok 框架有很多很赞的注解,但是人家是throw一个异常,这与有些需求不一定能匹配. 该文将基于So ...

  6. 操作系统-I/O（2）设备的分配

    作业执行前对设备提出申请时,指定某台具体的物理设备会让设备分配变得简单,但如果所指定设备出现故障,即便计算机系统中有同类设备也不能运行 设备独立性:用户通常不指定物理设备,而是指定逻辑设备,使得用户作 ...

  7. 牛客网PAT练习场-A+B和C

    签到题 .题目地址:https://www.nowcoder.com/pat/6/problem/4077 #include<iostream> #include<cstdio> ...

  8. MySQL数据和索引占用空间查询

    MySQL数据和索引占用空间查询 查询所有数据库占用磁盘空间大小的SQL语句 SELECT table_schema, -- 数据库名称 concat( TRUNCATE ( sum( data_le ...

  9. 图解JAVA容器核心类库

    JAVA容器详解 类继承结构图 HashMap 1. 对象的HashCode是用来在散列存储结构中确定对象的存储地址的.   2. 如果两个对象的HashCode相同,即在数组中的地址相同.而数组的元 ...

  10. Java面试题（Kafka篇+zookeeper 篇）

    Kafka 152.kafka 可以脱离 zookeeper 单独使用吗?为什么? kafka 不能脱离 zookeeper 单独使用,因为 kafka 使用 zookeeper 管理和协调 kafk ...