Добавить классы сверху и снизу

@Спрашыватель · Регистрация: 30.05.2016

Студворк — интернет-сервис помощи студентам

Я делаю таблицу нужно добавить вокруг неё классы - то есть вокруг будет серая граница, слева и справа я сделал а сверху и снизу ловится ошибка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  
</head>
<body>
    <div id="game">
 
    </div>
 
    
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .cell{
        width: 18px;
        height: 18px;
 
    }
    .floor{
        background: black;
    }
    .wall{
        background: grey;
    }
 
    </style>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script>
    class Map{
        constructor(selector, x, y){
            this._field = document.querySelector(selector);
            this._x = x;
            this._y = y;
 
            this._html = new HTML;
            this._html.createTable(this._field, this._x, this._y);
 
        }
    }
 
    class HTML {
        createTable(field, x, y){
            let arr = [];
            let table=document.createElement('table');
            for(let i = 0; i < x; i++){
                arr[i]=[];
                let tr = document.createElement('tr');
                for(let j = 0; j < y; j++){
                    let td=document.createElement('td');
                    td.innerHTML = 'x';
                    arr[i][j]=td;
                    td.classList.add('cell');
                    tr.appendChild(td);   
                   }
                table.appendChild(tr);
}
                        for(let a=0; a < arr.length; a++){
                        arr[a][0].classList.add('wall');
                        arr[a][x-2].classList.add('wall');
                        arr[0][a].classList.add('wall'); //почему то не работает 
                        arr[y][a].classList.add('wall'); //почему то не работает 
                            console.log(a);
                    }
 
console.log(arr.length);
     field.appendChild(table);            
        }
    }
    new Map('#game', 5, 4);
 
    </script>

Qwerty_Wasd · 22.01.2019, 15:39

Спрашыватель, матрица 4х5.
Откуда у Вас вот здесь

JavaScript
1
2
arr[0][a].classList.add('wall'); //почему то не работает 
arr[y][a].classList.add('wall'); //почему то не работает

возьмется 5-ый элемент в строке матрицы?

@Спрашыватель · 22.01.2019, 17:06 **[ТС]**

спасибо, выходит надо убавить значение на 1

Qwerty_Wasd · 22.01.2019, 17:22

Спрашыватель, не за что) Нет, не выходит)))
Что если матрица будет 4х10 - будете вычитать 6?
Отвлекитесь от своего кода пока что, вот двумерный массив

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let a = [
  [1,2,3,4,5],
  [6,7,8,9,10],
  [11,12,13,14,15]
];
 
// Это матрица 3 х 5, то есть 3 массива по 5 элементов
// или даже нарисуйте себе таблицу 3 строки х 5 столбцов
// Нам нужно обойти каждую строку по-элементно
// обычный двойной цикл
 
console.clear();
for(let i = 0; i < a.length ; i++) {
  for(let j = 0; j < a[i].length ; j++) {
    console.log(a[i][j]); // пооперируйте значениями i и j, поставьте например вместо i -> 0
  }
}

https://codepen.io/qwerty_wasd/pen/GzRYaB

@Спрашыватель · 22.01.2019, 17:56 **[ТС]**

Qwerty_Wasd,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
for(let a=0; a < x; a++){
                        arr[a][0].classList.add('wall');
                        arr[a][y-1].classList.add('wall');
                    }
 
            for(let b = 0; b < y; b++){
                        arr[0][b].classList.add('wall');
                        arr[x-1][b].classList.add('wall');
                    }
    new Map('#game',10, 7);
    new Map('#game',5,10);
    new Map('#game',7, 4);
    new Map('#game',9, 8);

решил вот так-вот, работает как надо при любых размерах и добавил ещё пару таблиц теперь красота

Qwerty_Wasd · 22.01.2019, 18:07

Не по теме:

Спрашыватель, главное чтобы Вас устраивало

@Спрашыватель · 22.01.2019, 19:19 **[ТС]**

Qwerty_Wasd, последняя просьба к тебе я вот дописал свой генератор карт, когда кликаю на генерейт карты генерируются и в миг пропадают почему так происходит?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <div class="settings">
        <form >
            <label for="width">Width %</label>   <input id="width"  type="text">
            <label for="height">Height %</label> <input id="height" type="text">
            <label for="numRoom">Number Rooms</label><input id="numRoom" type="text">
            <button  onclick="setting()">Generate</button></form>
        </form>
    </div>
    <div id="game">
 
    </div>
    
    <script src="index.js"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
    .cell{
        width: 18px;
        height: 18px;
        background: white;
    }
    .floor{
        background: black;
    }
    .wall{
        background: grey;
    }
    body {
    background: black;
}
table {
    border-spacing: 0;
}
    div#game {
    display: flex;
    justify-content: center;
}
.settings {
    width: 175px;
    color: white;
}
    </style>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
    class Map{
        constructor(width, height){
            this._field = document.querySelector('#game');
            this._width = width;
            this._height = height;
            this._x = Math.ceil(Math.random()*30+15);
            this._y = Math.ceil(Math.random()*30+15);
            this._html = new HTML;
            this._html.createTable( this._field, this._width, this._height, this._x, this._y);
 
        }
    }
    class Type {
        CellWall(arr, x, y){
            for(let a=0; a < x; a++){
                        arr[a][0].classList.add('wall');
                        arr[a][y-1].classList.add('wall');
                    }
 
            for(let b = 0; b < y; b++){
                        arr[0][b].classList.add('wall');
                        arr[x-1][b].classList.add('wall');
                    }
                    
        }
       
    }
 
    class HTML {
        createTable(field, width, height, x, y){
            field.style.width=width+'%';
            field.style.height=height+'%';
            let arr = [];
            let table=document.createElement('table');
            for(let i = 0; i < x; i++){
                arr[i]=[];
                let tr = document.createElement('tr');
                for(let j = 0; j < y; j++){
                    let td=document.createElement('td');
                    arr[i][j]=td;
                    td.classList.add('cell');
                    tr.appendChild(td);   
                   }
                table.appendChild(tr);
}
 
 
     field.appendChild(table); 
     let type = new Type;   
     type.CellWall(arr, x, y);
        }
    }
    setting = () => {
        let form = document.forms[0],
         width = +form.elements[0].value,
         height = +form.elements[1].value,
         numRoom = +form.elements[2].value;
 
         for(let z=0; z < numRoom; z++){
            new Map(width, height);
         }
        
}
  
    </script>

Qwerty_Wasd · 22.01.2019, 19:35

Спрашыватель, потому что стандартное поведение кнопки в форме - это отослать форму и перезагрузить страницу. Поэтому то что Вы добавили на неё, как и то что там было до этого пропадает. То есть нужно отменить стандартное поведение кнопки. В вашем случае Вы решили добавить событие инлайн, в виде атрибута. Там и отменим.
Замените

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="settings">
  <form>
    <label for="width">Width %</label>
    <input id="width" type="text"/>
    <label for="height">Height %</label>
    <input id="height" type="text"/>
    <label for="numRoom">Number Rooms</label>
    <input id="numRoom" type="text"/>
    <button onclick="setting();return false;">Generate</button>
  </form>
</div>
<div id="game"></div>

@amr-now · 22.01.2019, 19:36

<button type="button" решает вопрос.

Qwerty_Wasd · 22.01.2019, 19:42

amr-now, ну или так )

@amr-now · 22.01.2019, 21:16

Таблицу строкой собрать - код покрасивее.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cell {
            width: 18px;
            height: 18px;
            background: white;
        }
 
        .floor {
            background: black;
        }
 
        .wall {
            background: grey;
        }
 
        body {
            background: black;
        }
 
        table {
            border-spacing: 0;
        }
 
        div#game {
            display: flex;
            justify-content: center;
        }
 
        .settings {
            width: 175px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="settings">
        <form>
            <label for="width">Width %</label> <input id="width" type="text">
            <label for="height">Height %</label> <input id="height" type="text">
            <label for="numRoom">Number Rooms</label><input id="numRoom" type="text">
            <button type="button" onclick="setting()">Generate</button></form>
        </form>
    </div>
    <div id="game">
 
    </div>
    <script>
        class Map {
            constructor(width, height) {
                this._field = document.querySelector('#game');
                this._width = width;
                this._height = height;
                this._x = Math.ceil(Math.random() * 30 + 15);
                this._y = Math.ceil(Math.random() * 30 + 15);
                HTML.createTable(this._field, this._width, this._height, this._x, this._y);
            }
        }
 
        class HTML {
            static createTable(field, width, height, x, y) {
                field.style.width = width + '%';
                field.style.height = height + '%';
                let s = "<table><tbody>";
                for (let i = 0; i < x; i++) {
                    s += "<tr>";
                    for (let j = 0; j < y; j++) {
                        if (i === 0 || i === x - 1 || j === 0 || j === y - 1)
                            s += `<td class="wall">x</td>`;
                        else
                            s += `<td class="cell">x</td>`;
                    }
                    s += "</tr>";
                }
                s += "</tbody></table>";
                field.insertAdjacentHTML("beforeend", s);
            }
        }
        function setting() {
            let form = document.forms[0],
                width = +form.elements[0].value,
                height = +form.elements[1].value,
                numRoom = +form.elements[2].value;
 
            for (let z = 0; z < numRoom; z++) {
                new Map(width, height);
            }
        }
    </script>
</body>
</html>

Из мелких замечаний - не прикалывают сдвоенные стены. Хотя мож по сюжету так надо.
И стены все в одну линейку. А 2D не нужно?

@Спрашыватель · 23.01.2019, 11:08 **[ТС]**

amr-now, Спасибо ваш вариант конечно технически лучше, мой код далеко не идеальный, друг дал как упражнение, мне в итоге нужно будет получить подобное, по 2д незнаю ещё коридоры ещё не представляю как сделать но это другая история

@amr-now · 23.01.2019, 11:33

Сообщение от Спрашыватель

по 2д незнаю ещё коридоры ещё не представляю как сделать

Матрицу данных о стенах придется привязывать не к прямоугольнику комнаты, а непосредственно ко всему объекту карты.

Сейчас пока алгоритм тупиковый и требует переработки на уровне самой идеи.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Добавить классы сверху и снизу

Решение

Решение

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171
	22.01.2019, 17:06 [ТС]
	спасибо, выходит надо убавить значение на 1 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	22.01.2019, 18:07
	Не по теме: Спрашыватель, главное чтобы Вас устраивало 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	22.01.2019, 19:36
	`<button type="button"` решает вопрос. 2

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	22.01.2019, 19:42
	amr-now, ну или так ) 0

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171
	23.01.2019, 11:08 [ТС]
	amr-now, Спасибо ваш вариант конечно технически лучше, мой код далеко не идеальный, друг дал как упражнение, мне в итоге нужно будет получить подобное, по 2д незнаю ещё коридоры ещё не представляю как сделать но это другая история Миниатюры 0