Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
2 / 2 / 0
Регистрация: 09.02.2018
Сообщений: 140

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

16.11.2018, 11:59. Показов 1226. Ответов 7
Метки нет (Все метки)

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

заранее спасибо
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
16.11.2018, 11:59
Ответы с готовыми решениями:

Из БД вывести таблицу на страницу
Я совсем новичок в asp.net mvc2. Поэтому мой вопрос мой может показаться вам глупым и простым. На работе понадобилось сделать одну штуку,...

как вывести из бд таблицу на страницу?
<?php $host=localhost; $user=egocor; $pwd=transcend; $db=mysql_connect($host,$user,$pwd); ...

Вставить excel таблицу на страницу сайта
Добрый день. Возникла нужда вставлять на страницу сайта простую таблицу Excel. Нет ли у кого скрипта, который принимает путь excel таблицы...

7
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
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>
0
2 / 2 / 0
Регистрация: 09.02.2018
Сообщений: 140
19.11.2018, 14:52  [ТС]
код не работает
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
19.11.2018, 15:20
sisi11, работает в современном браузере.
Для какого браузера и какой версии нужно приспособить код?
0
2 / 2 / 0
Регистрация: 09.02.2018
Сообщений: 140
19.11.2018, 15:36  [ТС]
microsoft edge
последняя версия(windows 10)

и еще можете объяснить как работает 1 код?
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
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>
0
2 / 2 / 0
Регистрация: 09.02.2018
Сообщений: 140
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>
а как код работает ?
0
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
19.11.2018, 18:18
Цитата Сообщение от sisi11 Посмотреть сообщение
а как код работает ?
При клике на таблице добавьте ей класс bordered ,при втором клике удалите класс bordered и добавьте класс striped при третьем клике удалите класс striped добавьте класс highlight.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
19.11.2018, 18:18
Помогаю со студенческими работами здесь

нужно вместить таблицу на одну страницу
помогите пожалуйста с этой таблицей,здесь она растягивается на 2 страницы,надо чтобы все было на одну страницу,очень нужно пожалуйста!

Как вставить таблицу на страницу (контейнер)
Здравствуйте! Подскажите пожалуйста - есть таблица шириной 515 пикселей. В мобильной версии она не влезает на страницу. Скрин на всякий...

Как встроить php таблицу в htnl страницу?
Значит, так... Есть 3 html-странички:index.html, cars.html and contacts.html. Ну и файл стилей style.css. Также работаю с БД MySQL....

Вставить полноразмерные например таблицу Excel на страницу
ребята нужна ваша помошь , есть вот такой сайт gumbetcrb.ru не могу вставить полноразмерные например таблицу exel оно появляеться на...

вставить таблицу созданую gii на другую страницу
Здравствуйте. создав вид с помощью gii получаю в index.php &lt;?php use yii\helpers\Html; use yii\grid\GridView; use...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
влияние грибов на сукцессию
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 ). Также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru