1 Тема від a_marik

  • a_marik
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.07.2014
  • Повідомлень: 25
    • Репутація: 0

Тема: задача

Привіт усім хто прочитає це повідомлення. Допоміжіть будь ласка по реалізації завдання. У мене є таблиця:

 <table width='500' height='300' id='table2'>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
 </table>

Кожна із td має заданий ссs колір заднього фону. Моє завдання за допомогою цикла скопіювати властивість бекграунд колір фону елемента td і присвоїти його body. Без jquery.

var bo = document.getElementsByTagName('body')[0]; 
for(var i=0;i>18;i++){
  document.getElementsByTagName('td')[i].onclick{
    this.backgroundColor='yellow';
  } 
}

2 Відповідь від Djalin Востаннє редагувалося Djalin (19.01.2015 09:38:41)

  • Djalin
  • Djalin
  • Користувач
  • Поза форумом
  • Звідки: Ukraine
  • Дата реєстрації: 02.11.2014
  • Повідомлень: 1 561
    • Репутація: 441

Re: задача

▼офтоп

Миколо Янович перелогіньтеся

Djalin вебсайт

3 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 782
    • Репутація: 13453

Re: задача

Сформулюйте ще, в чому саме полягає проблема. Я, звісно, можу вказати на деякі вади коду (наприклад, 0<18), але ви ж не кажете, що вас саме це турбує, а ідеального коду не існує  в принципі.

koala вебсайт

4 Відповідь від a_marik Востаннє редагувалося a_marik (19.01.2015 10:17:22)

  • a_marik
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.07.2014
  • Повідомлень: 25
    • Репутація: 0

Re: задача

Проблема банальна body не копіює властивостей стилів background  із td елемента при натискані.

var bo = document.getElementsByTagName('body')[0];

for(var i=0;i<18;i++){
  if(document.getElementsByTagName('td')[i].onclick){
    bo.style.backgroundColor  = document.getElementsByTagName('td')[i].style.backgroundColor;
  } 
}

Я не можу сам придумати як скопіювати властивість елемента і передати її іншому елементу.

5 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 782
    • Репутація: 13453

Re: задача

Ну, є взагалі-то така річ, як document.body. І зовсім не зрозуміло, нащо його 18 разів (чому саме 18, до речі?) встановлювати, якщо залишиться тільки останній. Так, і чому ви перевіряєте, чи встановлено onclick? Це що, критерій якоїсь активності, чи що?

koala вебсайт

6 Відповідь від a_marik

  • a_marik
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.07.2014
  • Повідомлень: 25
    • Репутація: 0

Re: задача

Я  розбив собі завдання на частини, розповім повністю усю. Є таблиця на сторінці, у кожного із td є фон кольору при настикані на цей елемент фон body копіює його властивість.
Також є можливість переключити таблиця на іншу таблиця в якій буде зображено певні малюнки і при натискані користувачем на них фон body зміниться на фон натиснутого td.
Ось що я поки написав:

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>

tr,td{
       border: 1px solid black;
}
table{
 margin: auto;
 margin-top: 150px;
}
button{
  margin: 0;
}

#table2{
  display:none;
}
.bg{
  background-color: red;
 }
</style>
</head>
<body>
<button id='color'>Color</button><br>
<button id='img'>Img</button>

<table width='500' height='300' id='table1'>
<tr>
  <td class='bg'></td>
  <td></td>
  <td></td>
</tr>

<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
 </table>

 <table width='500' height='300' id='table2'>
<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
  <td></td>
  <td></td>
  <td></td>
</tr>

<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
 </table>
<script>



document.getElementsByTagName('button')[1].onclick = function(){
  document.getElementById('table1').style.display = 'none';
  document.getElementById('table2').style.display = 'table';
}
document.getElementsByTagName('button')[0].onclick = function(){
  document.getElementById('table2').style.display = 'none';
  document.getElementById('table1').style.display = 'table';
}

var bo = document.getElementsByTagName('body')[0];

document.getElementsByTagName('td')[0].style.backgroundColor = 'yellow';


for(var i=0;i<18;i++){
  if(document.getElementsByTagName('td')[i].onclick){
    bo.style.backgroundColor = document.getElementsByTagName('td')[i].style.backgroundColor;
  } 
}


</script>

</body>
</html>]

7 Відповідь від VTrim Востаннє редагувалося VTrim (19.01.2015 10:59:06)

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: задача

Не знаю чи підійде вам такий варіант.
Змінює колір фону сторінки на колір <td>,по якій клікаєте,вам це було потрібно?

<table width='500' height='300' id='table2'>
<tr>
  <td style="background-color:gray" onclick="document.bgColor = this.style.backgroundColor"></td>
  <td style="background-color:yellow" onclick="document.bgColor = this.style.backgroundColor"></td>
  <td style="background-color:black" onclick="document.bgColor = this.style.backgroundColor"></td>
  <td style="background-color:green" onclick="document.bgColor = this.style.backgroundColor"></td>
  <td></td>
</tr>
 </table>

8 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: задача

Або ж так

<table width='500' height='300' id='table2'>
<tr>
  <td style="background-color:gray" onclick="document.body.style.backgroundColor = this.style.backgroundColor"></td>
  <td style="background-color:yellow" onclick="document.body.style.backgroundColor = this.style.backgroundColor"></td>
  <td style="background-color:black" onclick="document.body.style.backgroundColor = this.style.backgroundColor"></td>
  <td style="background-color:green" onclick="document.body.style.backgroundColor = this.style.backgroundColor"></td>
  <td></td>
</tr>
 </table>

9 Відповідь від a_marik

  • a_marik
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.07.2014
  • Повідомлень: 25
    • Репутація: 0

Re: задача

дуже дякую, усе працює. Але мені поставили завдання перебрати циклом елементи td і той елементу по якому клацнули його передати фону. і ще одне за допомогою ccs я можу звернутись до td[2] або td[3] і т.п. окремо? тобто я хочу задати через css фон кожному із td окремо, як це краще реалізувати?

10 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: задача

Ясно,тримайте цикл

for(i=0; i<18; i++)
{
document.getElementsByTagName('td')[i].onclick = function(){
document.body.style.backgroundColor = this.style.backgroundColor;
}
}

11 Відповідь від koala Востаннє редагувалося koala (19.01.2015 11:39:30)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 782
    • Репутація: 13453

Re: задача

Елементи не знають, по якому з них клацнули, тому завдання некоректне. Коли користувач клацає - викликається подія onclick, якщо така існувала на момент клацання.
А цикл логічніше крутити по елементах, а не до 18:

document.getElementsByTagName('td').foreach(function(element){
  if(element.те-що-треба)
    document.body... = element...;
})

;

koala вебсайт

12 Відповідь від a_marik

  • a_marik
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.07.2014
  • Повідомлень: 25
    • Репутація: 0

Re: задача

ідеально. Дуже дякую! а мені ще вчитись і вчитись)

13 Відповідь від a_marik

  • a_marik
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.07.2014
  • Повідомлень: 25
    • Репутація: 0

Re: задача

а на рахунок присвоєння елементам css як звертатись до кожного із елементів td? давати усім іd, щоб задавати їм різні background

14 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: задача

Скоріше за все, так.

15 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 782
    • Репутація: 13453

Re: задача

Не id, а класи. id - це для унікальних властивостей; колір бекграунду - явно не унікальний.

koala вебсайт

16 Відповідь від CrazyFreeMan

  • Дата реєстрації: 29.12.2014
  • Повідомлень: 95
    • Репутація: 19

Re: задача

Надавати елементам ID потрібно також з розумом, кожний такий ID створює окрему ноду в DOM а це як не як відгризає частину ресурсів користувача, уявіть собі дерево з тисячі елементів з ID :)