Работа с таблицей

@fatin · Регистрация: 19.05.2016

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

Постройте таблицу из рандомного к-ва столбцов и ячеек, которые будут закрашены в черный и белый, через один.
Есть кнопка, при нажатии которой цвет ячеек поменяются на противоположный.
Проблема в том что не закрашивает

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <title>Homework#8</title>
 
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="task2.js"></script>
   <!-- <script src="rrrr.js"></script> -->
 
</head>
<body>
<table id="InStrip" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>
    <button onclick=f(this)>Змінити розкраску</button>
</body>
</html>

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
function onload() {
    let objTable = document.getElementById("InStrip");
    drawTable(objTable, "style1", "style2");
}
 
function drawTable(table, stl1, stl2) {
    for (let indexRow = 0; indexRow < table.rows.length; indexRow++) {
        for (let indexColumn = 0; indexColumn < table.rows[indexRow].cells.length; indexColumn++) {
            if((indexRow + indexColumn)%2 == 0) {
                table.rows[indexRow].cells[indexColumn].className = stl1;
            } else {
                table.rows[indexRow].cells[indexColumn].className = stl2;
            }
        }
    }
}
 
function f(status) {
    if(status.i) {
        status.i = 0;
        drawTable("style1", "style2");
    } else {
        status.i = 1;
        drawTable("style2", "style1");
    }
}

CSS
1
2
3
4
5
6
7
8
9
10
11
#InStrip td, #chess td {
    width:64px; height:64px;
}
 
.style1 {
    background-color: white;
}
 
.style2 {
    background-color: black;
}

Qwerty_Wasd · 02.11.2018, 16:06

fatin,

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
function onload() {
    let objTable = document.getElementById("InStrip");
    drawTable(objTable, "style1", "style2");
}
 
function drawTable(table, stl1, stl2) {
    for (let indexRow = 0; indexRow < table.rows.length; indexRow++) {
        for (let indexColumn = 0; indexColumn < table.rows[indexRow].cells.length; indexColumn++) {
            if((indexRow + indexColumn)%2 == 0) {
                table.rows[indexRow].cells[indexColumn].className = stl1;
            } else {
                table.rows[indexRow].cells[indexColumn].className = stl2;
            }
        }
    }
}
 
function f(status) {
    if(status.i) {
        status.i = 0;
        drawTable(document.getElementById("InStrip"),"style1", "style2");
    } else {
        status.i = 1;
        drawTable(document.getElementById("InStrip"),"style2", "style1");
    }
}

@fatin · 02.11.2018, 16:27 **[ТС]**

Спасиба, теперь понятно почему)

Добавлено через 9 минут
И ещё вопрос: а как сделать чтобы до нажатия клавиши таблица уже была раскрашенная?

Qwerty_Wasd · 02.11.2018, 16:45

fatin,

Сообщение от fatin

а как сделать чтобы до нажатия клавиши таблица уже была раскрашенная?

JavaScript
1
window.addEventListener('load',drawTable(document.getElementById("InStrip"), "style1", "style2"))

@fatin · 02.11.2018, 18:31 **[ТС]**

У меня почему то не работает

Qwerty_Wasd · 02.11.2018, 20:21

fatin, вот пример, работающий с Вашей версткой и Вашим же исправленным кодом- https://codepen.io/qwerty_wasd/pen/mQbYmv

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
function onload() {
    let objTable = document.getElementById("InStrip");
    drawTable(objTable, "style1", "style2");
}
 
function drawTable(table, stl1, stl2) {
    for (let indexRow = 0; indexRow < table.rows.length; indexRow++) {
        for (let indexColumn = 0; indexColumn < table.rows[indexRow].cells.length; indexColumn++) {
            if((indexRow + indexColumn)%2 == 0) {
                table.rows[indexRow].cells[indexColumn].className = stl1;
            } else {
                table.rows[indexRow].cells[indexColumn].className = stl2;
            }
        }
    }
}
 
function f(status) {
    if(status.i) {
        status.i = 0;
        drawTable(document.getElementById("InStrip"),"style1", "style2");
    } else {
        status.i = 1;
        drawTable(document.getElementById("InStrip"),"style2", "style1");
    }
}
window.addEventListener('load',drawTable(document.getElementById("InStrip"), "style1", "style2"));

Вот еще рабочий пример(можете скопировать и вставить в index.html) -

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
    #InStrip td,
    #chess td {
        width: 64px;
        height: 64px;
    }
    
    .style1 {
        background-color: white;
    }
    
    .style2 {
        background-color: black;
    }
    </style>
</head>
<body>
    <table id="InStrip" border="1" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <button onclick="f(this)">Змінити розкраску</button>
    <script>
    function onload() {
        let objTable = document.getElementById("InStrip");
        drawTable(objTable, "style1", "style2");
    }
 
    function drawTable(table, stl1, stl2) {
        for(let indexRow = 0; indexRow < table.rows.length; indexRow++) {
            for(let indexColumn = 0; indexColumn < table.rows[indexRow].cells.length; indexColumn++) {
                if((indexRow + indexColumn) % 2 == 0) {
                    table.rows[indexRow].cells[indexColumn].className = stl1;
                } else {
                    table.rows[indexRow].cells[indexColumn].className = stl2;
                }
            }
        }
    }
 
    function f(status) {
        if(status.i) {
            status.i = 0;
            drawTable(document.getElementById("InStrip"), "style1", "style2");
        } else {
            status.i = 1;
            drawTable(document.getElementById("InStrip"), "style2", "style1");
        }
    }
    window.addEventListener('load', drawTable(document.getElementById("InStrip"), "style1", "style2"));
    </script>
</body>
</html>

Как Вы думаете почему не работало у Вас?

Добавлено через 2 минуты
Для начала - http://javascript.ru/tutorial/foundation/start

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@fatin 0 / 0 / 0 Регистрация: 19.05.2016 Сообщений: 23
	02.11.2018, 16:27 [ТС]
	Спасиба, теперь понятно почему) Добавлено через 9 минут И ещё вопрос: а как сделать чтобы до нажатия клавиши таблица уже была раскрашенная? 0

@fatin 0 / 0 / 0 Регистрация: 19.05.2016 Сообщений: 23
	02.11.2018, 18:31 [ТС]
	У меня почему то не работает 0

Работа с таблицей

Решение