Закрасить таблицу - JavaScript, Ajax

Skeleton92 · 14.06.2017, 10:46

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

Код:

<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)
Модератор

Serge_Bliznykov · 14.06.2017, 11:21

так устроит?

Код:

<!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>

Skeleton92 · 14.06.2017, 11:26

Спасибо огромное!

Serge_Bliznykov · 14.06.2017, 11:35

не за что.

кстати, используя тернарную условную операцию можно ещё короче записать содержимое цикла, без if и без переменной s

Skeleton92 · 14.06.2017, 12:01

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

Код:

if ((Math.floor(i / 3)%2) == (Math.floor(j / 3)%2)) s ="class='r1'";

не догонял как задать.

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'";` не догонял как задать.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Закрасить текст	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

14.06.2017, 11:26	#3
Skeleton92 Заблокирован Регистрация: 29.10.2015 Сообщений: 10	Спасибо огромное!

14.06.2017, 11:35	#4
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	не за что. кстати, используя тернарную условную операцию можно ещё короче записать содержимое цикла, без if и без переменной s