目的：

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

功能：

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

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

程序流程：

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

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

再编写添加行和列函数。

最后编写删除函数。

　　　　　　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. Android java.lang.SecurityException: Permission Denial

    报错: java.lang.SecurityException: Permission Denial: starting Intent { act=android.media.action.IMAGE ...

  2. SQL获取多个字段中最大小值

    1.语法最大值: GREATEST(expr_1, expr_2, ...expr_n)最小值: LEAST(expr_1, expr_2, ...expr_n) 2.说明GREATEST(expr_ ...

  3. linux下top命令详细介绍

    linux下top命令详细介绍 top 命令是 Linux 下常用的系统资源占用查看及性能分析工具,能够实时显示系统中各个进程的资源(比如cpu.内存的使用)占用状况,top命令的执行结果是一个动态显 ...

  4. SparkStreaming简单例子（oldAPI）

    SparkStreaming简单例子 ◆ 构建第一个Streaming程序: (wordCount) ◆ Spark Streaming 程序最好以使用Maven或者sbt编译出来的独立应用的形式运行 ...

  5. docker flannel网络部署和路由走向分析

    1.flannel介绍 flannel是coreos开发的容器网络解决方案.flannel为每个host分配一个subnet,容器从此subnet中分配ip.这些ip可以在host间路由,容器间无需n ...

  6. Windows servers 2008 环境下，域控DC和DNS，分离搭建过程。

    近来做有关于window服务器方面运维的实验,正好借此记录下来,便于日后回顾. 通常情况下,域控DC服务器和DNS服务器一般不在一起,所以需要将其分开建立.而这个时候两个服务器的建立有先后顺序,本文会 ...

  7. 也谈基于Web的含工作流项目的一般开发流程

    项目包含的通用模块代码等我有时间一并剥离贡献出来(基于WebSocket的通知引擎,工作流整合模块,自定义表单,基于RBAC权限设计),最近太忙了,Web项目有一段时间没碰,有点生疏的感觉,主要在忙G ...

  8. 力扣Leetcode 200. 岛屿数量

    岛屿数量 给你一个由 '1'(陆地)和 '0'(水)组成的的二维网格,请你计算网格中岛屿的数量. 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成. 此外,你可以假设该网 ...

  9. WPF管理系统开发框架搭建指南，2020从入门到放弃

    WPF技术是一个很不错的技术,但一直没有上手过正式的项目,趁在做这个医疗项目时,遂搭建一个WPF开发框架,目的是为了统一WPF开发并提高开发效率:我对WPF技术算是零基础,现学现卖,用这些不成体系的文 ...

  10. Java实现的二叉堆以及堆排序详解

    一.前言 二叉堆是一个特殊的堆,其本质是一棵完全二叉树,可用数组来存储数据,如果根节点在数组的下标位置为1,那么当前节点n的左子节点为2n,有子节点在数组中的下标位置为2n+1.二叉堆类型分为最大堆( ...