Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Раскрасить таблицу (https://javascript.ru/forum/misc/17791-raskrasit-tablicu.html)

Mark 02.06.2011 23:48
Раскрасить таблицу
 
Здравствуйте! Помогите со скриптом, надо раскрасить таблицу умножения в шахматном порядке.
Таблица есть, а вот раскрасить никак не получается.

function ftable(inum) { 
var iloop = 1; 
document.writeln ("<font color='#ffffff' size='10'>Таблица умножения</font><pre>"); 
while (iloop <= 10) { 
document.writeln(iloop + " <font color='#ffffff'>x</font> "+ inum + " <font color='#ffffff'>=</font> " + (iloop*inum)); 
iloop ++; 
} 
document.writeln("</pre>"); 
} 
ftable(prompt ("Показать таблицу умножения на: ", 5));

uniq 03.06.2011 14:00 
if(iloop%2){
      // код для вывода в одной последовательности цветов
}else{
       // код для вывода в другой последовательности цветов
}


Либо делать с помощью CSS3 и таблицы:

table tr:nth-child(even) td:nth-child(odd) {background: #CCC}
table tr:nth-child(odd) td:nth-child(even) {background: #CCC}

будут закрашиваться ячейки в шахматном порядке.

nikita.mmf 05.06.2011 14:20 
var table = document.getElementById("product_table");
var rows = table.getElementsByTagName("tr");
for ( var i = 0; rows[i]; i++ ) {
  var cells = rows[i].getElementsByTagName("td");
  for ( var j = 0; cells[j]; j++ ) {
    if ( (i + j) % 2 ) {
      cells[j].style.backgroundColor = "#CCC";
    }
  }
}

monolithed 05.06.2011 16:48
Mark, перед созданием темы поиском пользовались? ;)
<script type="text/javascript">
window.onload = function(){
    var tr = document.getElementById('table').getElementsByTagName('tr'), 
          i = tr.length;
    while(i--) {
        tr[i].style.backgroundColor = i%2 ? 'red' : 'green';
    }
};
</script>
<style>
td {
    border: 1px solid #FFF;
    width: 50px;
    height: 50px;
}
</style>
<table id="table">
    <tr><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>2</td><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>3</td><td>3</td></tr>
</table>

person 06.06.2011 06:42
Цитата:
Mark, перед созданием темы поиском пользовались?
monolithed, перед ответом вопрос читали?:lol:

monolithed, ну и где тут шахматное поле?

monolithed 06.06.2011 08:41
Цитата:
Сообщение от person
перед ответом вопрос читали?
обязательно
Цитата:
Сообщение от person
ну и где тут шахматное поле?
ой как сложно одну буковку поменять ;) 
<script type="text/javascript">
window.onload = function(){
    var tr = document.getElementById('table').getElementsByTagName('td'), 
          i = tr.length;
    while(i--) {
        tr[i].style.backgroundColor = i%2 ? 'red' : 'green';
    }
};
</script>
<style>
td {
    border: 1px solid #FFF;
    width: 50px;
    height: 50px;
}
</style>
<table id="table">
    <tr><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>2</td><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>3</td><td>3</td></tr>
</table>

person 07.06.2011 14:43
monolithed, а потестить свой скрипт религия не позволяет или время?
Добавляем четвертую(четную!!!) ячейку, и любуемся вертикальными полосами, это проистекает из логики работы скрипта, лента, она и в Африке лента.
В строго определенных случаях, можно и так.

Ещё попытка будет? из прЫнцЫпа? :haha:

nikita.mmf 07.06.2011 15:14
person,
я вам уже написал решение

monolithed 07.06.2011 15:17
Цитата:
Сообщение от person
Ещё попытка будет? из прЫнцЫпа?
ну строчку добавить если четное количество столбцов четное parentNode.firstChild, что суть не изменит

TicTac 07.06.2011 22:53
мой лисапед:)

person 08.06.2011 07:08
nikita.mmf, спасибо, но я своих вариантов ещё в первый день накидал не один(очень похожих), а monolithed просто ошибку указал. Просто интересно, есть ли ещё более крутое решение, вот и слежу за темой, проверяю.


TicTac, коду много, имхо.


Если надо без скрипта, используем TD и TH, для небольших табличек пойдёт.

NoResponse 08.06.2011 08:56
да не будет других скорее всего, только подобные
<script type="text/javascript">
window.onload = function(){
    var tr	= document.getElementById('table').getElementsByTagName('tr'),
    	i	= tr.length;
    while(i--) {
	    var td	= tr[i].getElementsByTagName('td'),
			j	= td.length;
	    while(j--) {
	        td[j].style.backgroundColor = (i+j)%2 ? 'red' : 'green';
	    }
    }
};
</script>
<style>
td {
    border: 1px solid #FFF;
    width: 50px;
    height: 50px;
}
</style>
<table id="table">
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</table>


Часовой пояс GMT +3, время: 07:03.