原生js座位管理

最新推荐文章于 2024-06-12 17:46:27 发布

wen_special

最新推荐文章于 2024-06-12 17:46:27 发布

阅读量5k

点赞数 3

分类专栏： demo操作课程设计文章标签： html css

本文链接：https://blog.csdn.net/wen_special/article/details/78507973

版权

本文介绍了使用原生JavaScript创建一个简单的座位管理界面，包括动态生成座位、改变座位状态等功能。作者采用HTML、Bootstrap和CSS技术，未使用jQuery。文中详细讲解了座位动态生成和状态变更的实现过程，并提供了代码示例。

摘要由CSDN通过智能技术生成

以前每次做ttms中的座位管理时，用的都是插件，突然就想自己写一个原生的座位管理了。先附上一张成果图。

座位管理的界面：

这里写图片描述

座位管理的修改座位状态:

这里写图片描述

座位管理中修改座位状态之后：

这里写图片描述

界面有些丑陋，但是基本的功能还是已经实现了的。包括动态的生成座位，改变座位的状态。因为只是一个界面所以数据都是假数据。在之后连数据库后会进一步的完善。

需要用到的技术：html,bootstrap,css,js;(个人因为jq用的不熟练，所以没有选择jq)

代码可能有些繁琐，大家可以优化代码，我个人也会持续优化;

首先，关于座位的动态生成：

在之前中，写到了动态生成表格。其实思想集合是相同的。可以去动态的创建图片，如果说不需要具体的座位的行列值可以直接通过两层循环动态创建图片。但如果是需要和我一样需要具体的行列值，可以尝试讲创建的座位和行列值放在一个div中去实现。主要通过`createElement`方法实现。具体代码实现如下：

'use strict'
let row,col;
window.onload = function createState() {
   
    for(let i = 1;i<=8;i++){
        for(let j = 1;j<=8;j++) {
            let one = document.createElement('div');
         document.getElementById('seat').appendChild(one);
            one.setAttribute('class', 'oneDiv');
            let sateImage = document.createElement('img');
            let num = document.createElement('span');
            num.innerText