С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.68/34: Рейтинг темы: голосов - 34, средняя оценка - 4.68
0 / 0 / 0
Регистрация: 24.09.2013
Сообщений: 76
1

Цвета ячеек в шахматном порядке

03.12.2014, 15:19. Показов 7032. Ответов 2
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
есть код, который генерирует таблицу умножения, числа которое вводим, помогите раскрасить ячейки в шахматном порядке, заранее спасибо)
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function newTable(collsCount, rowsCount)
    {
    
    var x=prompt("Введите значение Х",""); x = parseFloat(x);
 
    tableCode = "<TABLE border = '1'>"
          tableCode += "<TR>";
          tableCode += "<TD>&nbsp;</TD>";
                for (var c = 0; c <= collsCount; c++)
                        {
                        tableCode += "<TD>";
                        tableCode +=  c;
                        tableCode += "</TD>";
                        }
            
         tableCode += "</TR>";
 
         tableCode += "<TR>";
                    tableCode += "<TD>";
                    tableCode += x;
                    tableCode += "</TD>";
                    for (var c = 0; c <= collsCount; c++)
                    {
                    tableCode += "<TD>";
                    tableCode += c*x;
                    tableCode += "</TD>";
                    }
            
        tableCode += "</TR>";
    tableCode += "</TABLE>";
    document.getElementById('tableCode').innerHTML += tableCode;
    }
 
    
</script>
    
<BODY>
<Div id = "tableCode"></div>
 
<Form name = "myForm">
<input type = "button" onClick = "newTable(9,2)" value = "Генерация таблицы">
</Form> 
</BODY>
</HTML>
CSS
1
2
3

col1{width: 100px;}
table {border: 1px solid #000;table-layout: fixed;width: 300px;}
html{background: white;}
Добавлено через 1 час 23 минуты
проблема решена
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 03.12.2014, 15:19
Ответы с готовыми решениями:

Цвета ячеек таблицы
Как сделать так, что бы цвет ячеек таблицы плавно изменялся от заданого до конечного цвета, заданых...

Измение цвета ячеек в таблице по клику
Задание: создать таблицу 5х5, при клике на ячейку она закрашивается черным цветом, повторный клик -...

Смена цвета ячеек
Здравствуйте, нужна ваша помощь. Вообщем есть код, который должен менять цвет ячеек: 1. При...

В шахматном порядке
Заполнить двоичную матрицу (состоящую только из нулей и единиц) в шахматном порядке. В левом...

2
Эксперт JSЭксперт HTML/CSS
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
05.12.2014, 11:16 2
Раскрашиваем таблицу в шахматное поле.

Скрипт позволяет иметь в отдельной строке разное количество ячеек, то есть использовать атрибут colspan="ХХ", а также можно использовать атрибут rowspan="ХХ".
При использовании атрибутов colspan="ХХ" и rowspan="ХХ" результат может получиться любопытным, зависит от реальной таблицы.
Имеется три версии функции, "неправильная", работающая от конца таблицы к началу, и правильная, работающая от начала к концу, но требующая две лишние переменные и уступающая в скорости неправильной.
Третья версия быстрее всех, но шахматное поле можно получить только если имеем нечётное количество ячеек в ряду, при чётном количестве получаем вертикальные полосы.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Раскраска таблицы в шахматном порядке</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="color_tab_c.css">
<script type="text/javascript" src="color_tab_c.js"></script>
</head>
 
<body>
 
<table border="1" cellpadding="0" cellspacing="0" id="InStrip">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8
</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16
</td></tr><tr><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24
</td></tr><tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>32
</td></tr><tr><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td><td>40
</td></tr><tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48
</td></tr><tr><td>49</td><td>50</td><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56
</td></tr><tr><td>57</td><td>58</td><td>59</td><td>60</td><td>61</td><td>62</td><td>63</td><td>64
</td></tr></table>
 
</body>
</html>
CSS
1
2
3
4
5

#InStrip, #chess {margin:100px auto 0 auto;}
#InStrip td, #chess td {text-align:center; width:64px; height:64px;}
 
.dark {background:beige;}
.light {background:azure;}
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
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

/**
  Функция makeChessBoard принимает таблицу и 
  присваивает элементам td в шахматном порядке
  класс «darkSide»/
*/
//
onload=function(){
var obj=document.getElementById("InStrip");
makeChessBoard(obj);
 };//
 
function makeChessBoard(obj) {
var x, y;
for (y = 0; y <obj.rows.length; y++) {
for (x = 0; x <obj.rows[0].cells.length; x++) {
if((x + y) % 2 ) { // Красим только когда сумма номеров строки и столбца нечётная
obj.rows[y].cells[x].className = "dark";}}};
}
 
/*
//
onload=function(){
var obj, c, i, l;
obj=document.getElementById("InStrip");
l=obj.rows.length;//сколько строк в таблице
while(l--){
i=obj.rows[l].cells.length;//сколько ячеек в строке
c=obj.rows[l].cells;//ссылка на все(массив) ячейки этой строки
while(i--){
if(i%2==0){c[i].className=l%2==0?"dark":"light";}
else{c[i].className=l%2==0?"light":"dark";}}};
 };//
*/
/*
//
onload=function(){
var obj, c, i, l, k, j;
obj=document.getElementById("InStrip");
l=obj.rows.length;//сколько строк в таблице
for(k=0; k!=l; k++){
i=obj.rows[k].cells.length;//сколько ячеек в строке
c=obj.rows[k].cells;//ссылка на все(массив) ячейки этой строки
for(j=0; j!=i; j++){
if(j%2==0){c[j].className=k%2==0?"dark":"light";}
else{c[j].className=k%2==0?"light":"dark";}}};
 };//
*/
 
/*
//эта версия работает только при нечётном количестве ячеек в ряду!!!
onload=function(){
var c, l;
c=document.getElementById('InStrip').getElementsByTagName('td');
l=c.length; 
while(l--){c[l].className=l%2==0?"dark":"light";};
 };//
 
*/
0
0 / 0 / 1
Регистрация: 20.01.2010
Сообщений: 28
05.12.2014, 17:30 3
Для этого в css3 сделали псевдокласс :nth-child
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
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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Шахматное поле -псевдоклассы nth-child(odd) и nth-child(even)</title>
<style type="text/css">
 *{margin:0;padding:0}
 #chess{
 border:2px solid #000;
 display:inline-block;
 position:absolute;
 left:50%;
 top:50%;
 margin-top:-200px;
 margin-left:-200px;
 background:#000;/*Установим фон для всего поля*/
 }
 #chess>div{width:400px}
 #chess>div>div{width:50px;float:left;height:50px}
 #chess>div:nth-child(even)>div:nth-child(even){background:#fff}/*Покрасим все четные*/
 #chess>div:nth-child(odd)>div:nth-child(odd){background:#fff}/*Покрасим все не четные*/
</style>
</head>
<body>
<div id="chess">
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div></div>
 <div></div>
 <div></div>
<div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div> 
 <div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</div>
</body>
</html>
0
05.12.2014, 17:30
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 05.12.2014, 17:30
Помогаю со студенческими работами здесь

Попарно в шахматном порядке
Сформировать массив заданной пользователем размерности (не менее 10х10), в котором все нулевые...

Создать матрицу в шахматном порядке из 0 и 5
Помогите создать матрицу из 0 и 5, получается, что условие выполняется только ля последней строки....

Выстроить выводимые числа в шахматном порядке
надо чтобы 3123 стоял внизу как на шахматном порядке

Процедура считывания матрицы в шахматном порядке
Что не так в процедуре Matrix_Inpit?? Как ни крутись перед else выдает ошибку. То нехватает точти з...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru