目的：

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

功能：

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

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

程序流程：

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

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

再编写添加行和列函数。

最后编写删除函数。

　　　　　　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. Mysql多条数据以一条展示和判断某字符是否在某字段

    多条数据以一条数据展示:GROUP_CONCAT select GROUP_CONCAT(uuid) from user; 判断某字符是否存在某字段:INSTR select * from( sele ...

  2. 修改linux 动态ip为静态ip

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO=static 设置网卡引导协议为 静态 ONBOOT=yes 网卡开机自启动 配置[IP ...

  3. Kubernetes 实战-Operator Finalizers 实现

    原文链接:https://zdyxry.github.io/2019/09/13/Kubernetes-%E5%AE%9E%E6%88%98-Operator-Finalizers/ Finalize ...

  4. 使用Spring Boot DevTools优化你的开发体验

    场景再现 某日少年收到前端同学发来的消息说联调的接口响应异常

  5. Maven通解

      参考博文:通俗理解maven 该篇文章篇幅很长,大概的思路如下 maven的介绍,初步认识,获取jar包的三个关键属性 --> 介绍仓库(获取的jar包从何而来)-->用命令行管理ma ...

  6. Spring是如何解决循环依赖的

    前言 在面试的时候这两年有一个非常高频的关于spring的问题,那就是spring是如何解决循环依赖的.这个问题听着就是轻描淡写的一句话,其实考察的内容还是非常多的,主要还是考察的应聘者有没有研究过s ...

  7. 一文带你深扒ClassLoader内核，揭开它的神秘面纱！

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」. 如果觉得 「不错」 的朋友,欢迎 「关注 + 留言 + 分享」,文末有完整的获取链接,您的支持是我前进的最大的动力! 前言 Clas ...

  8. 深入了解Redis(3)-对象

    Redis主要的数据结构有简单动态字符串(SDS).双端链表.字典.压缩列表.整数集合,等等.但Redis并没有直接使用这些数据结构来实现键值对数据库, 而是基于这些数据结构创建了一个对象系统, 这个 ...

  9. JVM-Java创建对象过程

    关键字:类加载过程.内存分配 指针碰撞法.空间列表法.CAS.TLAB.初始化.对象头 Java对象创建方式(不包含数组和Class对象创建): new指令 反射调用 反序列化 对象创建过程 遇到ne ...

  10. 【Go语言入门系列】（八）Go语言是不是面向对象语言？

    [Go语言入门系列]前面的文章: [Go语言入门系列](五)指针和结构体的使用 [Go语言入门系列](六)再探函数 [Go语言入门系列](七)如何使用Go的方法? 1. Go是面向对象的语言吗? 在[ ...