目的：

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

功能：

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

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

程序流程：

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

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

再编写添加行和列函数。

最后编写删除函数。

　　　　　　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. 如何解决Mybatis 日期查询时后面带.0

    关于如何解决Mybatis 日期查询时后面带.0   MySQL数据库: 直接在MySQL查询语句中解决: SELECT T.ID, T.USERNAME, DATE_FORMAT(t.birthda ...

  2. 第二章 Kuberbetes实践指南

    kubernetes安装与配置 网络,安全,服务启动配置 参考: kubernetes权威指南第二版 kubectl命令行工具用法详解 kubectl [command] [type] [name] ...

  3. 拼接html不显示layui进度条解决方法

    最新有个新需求,要异步拼接html并渲染数据,并且我这边是用layui的flow.load(流加载)渲染多个进度条.按官网给出的 element.progress('demo', n+'%'); 就是 ...

  4. Oracle数据库安装教程

    一.准备文件 Oracle安装程序(64位)下载地址: http://download.oracle.com/otn/nt/oracle11g/112010/win64_11gR2_database_ ...

  5. jqgrid 获取选中用户的数据插入

    因为查询出的表和被插入的表不是在同一个数据库,所以先从前台jqgrid表格中获取到数据后,再插入表中. 实现: 获取到jqgrid选中 的每行数据之后,发ajax请求把数据以json格式传入后台,后台 ...

  6. 结对项目 实现自动生成四则运算题目的程序 (C++)

    本次作业由 陈余 与 郭奕材 结对完成 零.github地址: https://github.com/King-Authur/-Automatically-generate-four-arithmet ...

  7. Public-Key Cryptosystems Based on Composite Degree Residuosity Classes

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 以下是对本文关键部分的摘抄翻译,详情请参见原文. 论文未全部翻译 Abstract. 本文研究了一个新的计算问题,即合数剩余阶问题(Com ...

  8. 经典游戏--24点--c++代码实现和总体思路（简单暴力向）

    24点 24点是一个非常经典的游戏,从扑克牌里抽4张牌,其中J=11,Q=12,K=13,然后经过+,-,*,/,(),的计算后,使得计算得值为24,例如抽到1,2,2,5四张牌,那么 (1+5)*( ...

  9. Vue 开发技巧总结

    ​博客地址:https://ainyi.com/95 本人玩了 Vue 两年多,在此总结一下开发时的一些技巧和方法 自定义组件 v-model v-model 是 Vue 提供的一个语法糖,它本质上是 ...

  10. Vue最全知识点

    声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理, 基础篇 说说你对MVVM的理解 Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,View ...