Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.06.2017, 10:46   #1
Skeleton92
Пользователь
 
Регистрация: 29.10.2015
Сообщений: 10
По умолчанию Закрасить таблицу

Здравствуйте.
Нужно закрасить согласно рисунку динамическую таблицу, используя вложенные операторы цикла.
Я только начал изучать эту тему, может кто-нибудь наведет на мысль как реализовать.
Нашел вариант с шахматной доской.
Код:
<style>
.r1 {background-color: green; height: 50px; width: 50px;}
.r2 {background-color: blue; height: 50px; width: 50px;}
</style>
<script>
var n = 7; var s;
document.write("<table>");
for (i=1; i<=n; i=i+1)
    {
    document.write("<tr>")
        for (j=1; j<=n; j=j+1)
            {
            st = (i+j)%2;
            if (st == 0) s ="class='r1'";
            else s = "class='r2'";
            document.write("<td " +s+ "></td>");
            }
    document.write("</tr>")
    }
document.write("</table>")
</script>
_____
Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ)
Модератор
Изображения
Тип файла: jpg 1.jpg (30.3 Кб, 20 просмотров)

Последний раз редактировалось Serge_Bliznykov; 14.06.2017 в 11:02.
Skeleton92 вне форума Ответить с цитированием
Старый 14.06.2017, 11:21   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

так устроит?

Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<style>
.r1 {background-color: #33FF33; height: 30px; width: 30px;}
.r2 {background-color: #3366FF; height: 30px; width: 30px;}
</style>
<script>
var n = 9;
document.write("<table>");
for (i=0; i<n; i++)
    {
    document.write("<tr>")
        for (j=0; j<n; j++)
            {
            //st = (i+j)%2;
            if ((Math.floor(i / 3)%2) == (Math.floor(j / 3)%2)) s ="class='r1'";
            else s = "class='r2'";
            document.write("<td " +s+ "></td>");
            }
    document.write("</tr>")
    }
document.write("</table>")
</script>
</body>
</html>
Serge_Bliznykov вне форума Ответить с цитированием
Старый 14.06.2017, 11:26   #3
Skeleton92
Пользователь
 
Регистрация: 29.10.2015
Сообщений: 10
По умолчанию

Спасибо огромное!
Skeleton92 вне форума Ответить с цитированием
Старый 14.06.2017, 11:35   #4
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

не за что.

кстати, используя тернарную условную операцию можно ещё короче записать содержимое цикла, без if и без переменной s
Serge_Bliznykov вне форума Ответить с цитированием
Старый 14.06.2017, 12:01   #5
Skeleton92
Пользователь
 
Регистрация: 29.10.2015
Сообщений: 10
По умолчанию

нам пока именно так надо, но я погуляюсь с реализацией.
основная проблема была с условием
Код:
if ((Math.floor(i / 3)%2) == (Math.floor(j / 3)%2)) s ="class='r1'";
не догонял как задать.
Skeleton92 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрасить текст N1VaL C# (си шарп) 3 19.02.2017 22:32
Создать таблицу и закрасить её ячейки так, как это показано на приложенном рисунке Chips186 JavaScript, Ajax 4 20.12.2016 00:09
Закрасить ячейки amadeus017 Microsoft Office Excel 8 06.05.2015 15:28
Закрасить область badaladanbad Win Api 3 20.04.2011 17:05
Закрасить кнопку artemavd Общие вопросы Delphi 9 12.07.2008 15:37