Добавьте на страницу таблицу в стандартном оформлении

@sisi11 · Регистрация: 09.02.2018

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

Добавьте на страницу таблицу в стандартном оформлении .При клике на таблице добавьте ей класс bordered ,при втором клике удалите класс bordered и добавьте класс striped при третьем клике удалите класс striped добавьте класс highlight

заранее спасибо

@amr-now · 16.11.2018, 13:19

Если вообще не трогать другие классы из списка и организовать бесконечную прокрутку классов, то так:

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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        document.body.innerHTML = '<table id="table1"><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>';
        let t1 = document.getElementById("table1"),
            cl = t1.classList;
        t1.onclick = () => {
            if(cl.contains("highlight")){
                cl.replace("highlight","bordered");
            }
            else if (cl.contains("bordered")) {
                cl.replace("bordered","striped");
            }
            else if (cl.contains("striped"))
            {
                cl.replace("striped","highlight");
            }
            else{
                cl.add("bordered");
            }
 
        };
    </script>
</body>
</html>

Если одноразово переставлять по номеру, то скрипт будет проще, но скучнее ))

Добавлено через 31 минуту
Можно не хардкодить цепочку if или switch, а крутить произвольные элементы массива:

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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        document.body.innerHTML = '<table id="table1"><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>';
        let t1 = document.getElementById("table1"),
            cl = t1.classList;
        t1.onclick = () => {
            let classes = ["bordered", "striped", "highlight"];
            classes.some((e, i) => {
                if (cl.contains(e)) {
                    cl.replace(e, i === classes.length - 1 ? classes[0] : classes[i + 1]);
                    return true;
                }
                else
                    return false;
            }) || cl.add(classes[0]);
        };
    </script>
</body>
</html>

@sisi11 · 19.11.2018, 14:52 **[ТС]**

код не работает

@amr-now · 19.11.2018, 15:20

sisi11, работает в современном браузере.
Для какого браузера и какой версии нужно приспособить код?

@sisi11 · 19.11.2018, 15:36 **[ТС]**

microsoft edge
последняя версия(windows 10)

и еще можете объяснить как работает 1 код?

@amr-now · 19.11.2018, 16:39

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

microsoft edge
последняя версия(windows 10)

В Ёжике после щелчка по таблице надо залезть в DevTools, вкладку "Элементы".
Будет видно, как меняется класс у элемента <table>

Добавлено через 1 минуту

HTML5
1
<table class="highlight" id="table1"><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>

@sisi11 · 19.11.2018, 17:34 **[ТС]**

понял спасибо

Сообщение от amr-now

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
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        document.body.innerHTML = '<table id="table1"><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>';
        let t1 = document.getElementById("table1"),
            cl = t1.classList;
        t1.onclick = () => {
            if(cl.contains("highlight")){
                cl.replace("highlight","bordered");
            }
            else if (cl.contains("bordered")) {
                cl.replace("bordered","striped");
            }
            else if (cl.contains("striped"))
            {
                cl.replace("striped","highlight");
            }
            else{
                cl.add("bordered");
            }
 
        };
    </script>
</body>
</html>

а как код работает ?

@amr-now · 19.11.2018, 18:18

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

а как код работает ?

При клике на таблице добавьте ей класс bordered ,при втором клике удалите класс bordered и добавьте класс striped при третьем клике удалите класс striped добавьте класс highlight.

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@sisi11 2 / 2 / 0 Регистрация: 09.02.2018 Сообщений: 140

	Добавьте на страницу таблицу в стандартном оформлении 16.11.2018, 11:59. Показов 1226. Ответов 7 Метки нет (Все метки) Добавьте на страницу таблицу в стандартном оформлении .При клике на таблице добавьте ей класс bordered ,при втором клике удалите класс bordered и добавьте класс striped при третьем клике удалите класс striped добавьте класс highlight заранее спасибо 0

@sisi11 2 / 2 / 0 Регистрация: 09.02.2018 Сообщений: 140
	19.11.2018, 14:52 [ТС]
	код не работает 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	19.11.2018, 15:20
	sisi11, работает в современном браузере. Для какого браузера и какой версии нужно приспособить код? 0

@sisi11 2 / 2 / 0 Регистрация: 09.02.2018 Сообщений: 140
	19.11.2018, 15:36 [ТС]
	microsoft edge последняя версия(windows 10) и еще можете объяснить как работает 1 код? 0