目的：

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

功能：

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

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

程序流程：

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

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

再编写添加行和列函数。

最后编写删除函数。

　　　　　　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. RFC2474 - Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers的双语版

    RFC2474 - Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers英文版 ...

  2. 笔记：CSS基础

    一.CSS(层叠式样式表),决定页面怎么显示元素 1.引入方式: 行内样式,在当前标签元素中直接使用 style 的属性. 内嵌方式,在<head>中写样式: 外链式,<link&g ...

  3. Jmeter 常用函数（3）- 详解 __RandomString

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 根据指定的字符产生一个随机字符串 语法 ...

  4. 个人项目（WordCount C语言）

    WordCount程序(C语言) Github地址:https://github.com/peter-ye-code/WordCount 一.题目描述 实现一个简单而完整的软件工具(源程序特征统计程序 ...

  5. 从零搭建Spring Boot脚手架（7）：整合OSS作为文件服务器

    1. 前言 文件服务器是一个应用必要的组件之一.最早我搞过FTP,然后又用过FastDFS,接私活的时候我用MongoDB也凑合凑合.现如今时代不同了,开始流行起了OSS. Gitee: https: ...

  6. Android Studio开发工具常用快捷键。部分总结，不全面，只包含新手可能少用的

    Android Studio开发工具常用快捷键.部分总结,不全面,只包含新手可能少用的 作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 首先说明,因为 ...

  7. 网络请求以及网络请求下载图片的工具类 android开发java工具类

    package cc.jiusan.www.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; ...

  8. Unity调用PC摄像头

    转载于Unity3d圣典里面,具体哪位大侠写的我忘咯. using UnityEngine; using System.Collections; public class CameraTest : M ...

  9. 使用Docker构建PHP7.4 + Swoole + Redis镜像

    使用Docker构建PHP7.4 + Swoole + Redis镜像 Docker是一个用于开发,交付和运行应用程序的开放平台.开发者可以利用Docker来快速交付,测试和部署代码,从而大大减少编写 ...

  10. 浅谈备受开发者好评的.NET core敏捷开发工具，讲讲LEARUN工作流引擎

    通俗来讲,所谓一个工作流管理系统,如果将其拆分出来一个个单讲话,大致可理解为由工作流引擎.工作流设计器.流程操作.工作流客户界面. 流程监控.表单设计器.与表单的集成以及与应用程序的集成等几个部分组成 ...