Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2013, 22:52
Новичок на форуме
Отправить личное сообщение для charmette Посмотреть профиль Найти все сообщения от charmette
 
Регистрация: 20.01.2013
Сообщений: 1

как вставить cтиль СSS
Здравствуйте! Подскажите,как сделать так,чтоб background ячеек таблицы становился такого же цвета,как выбирает пользователь?то есть td закрашивались в шахматном порядке в зависимости от того,какие цвета ввел пользователь? Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2013, 03:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<style>
table {
 width:100%;
}
#Mytable td{
 padding:4px;
 cursor:pointer;
 height:50px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>



<b>Кликните по ячейке шахмат, затем выберите eё цвет</b> (<font color="#32F3FF">цвет можно перебирать</font>)<br /><br />
                        <table id="Color" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                              <td style="background-color:black">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:silver">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:gray">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:white">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:maroon">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:red">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:purple">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:fuchsia">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:green">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:lime">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:olive">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:yellow">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:navy">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:blue">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:teal">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:aqua">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                            </tr>
                          </tbody>
                        </table><br /><br />
<b>"Шахматная доска"</b>
                        <table border="1" id="Mytable" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr>
                                <td>ячейка 1  </td>
                                <td>ячейка 2  </td>
                                <td>ячейка 3  </td>
                                <td>ячейка 4  </td>
                              </tr>
                              <tr>
                                <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>
                              </tr>
                              <tr>
                                <td>ячейка 13  </td>
                                <td>ячейка 14  </td>
                                <td>ячейка 15 </td>
                                <td>ячейка 16 </td>
                              </tr>
                            </tbody>
                          </table>
<script type="text/javascript">
$(document).ready(function(){
var ColorArr = ['ffffff','ffffff'];
var IndArr=0;
$("#Mytable td").click(function(){ //alert('Выберите цвет яейки!')
   var tr = $(this).parent('tr');
   IndArr = ($(this).parents('table').find('tr').index(tr)+tr.find('td').index($(this)))%2;

   $("#Color td > img").bind('click',function(){
     IndArr = IndArr%2;
     ColorArr[IndArr]=$(this).parent().css('background-color');
     $("#Mytable tr").each(function(j){
       $(this).find("td").each(function(i){
         var ind = (i+j)%2;
         $(this).css({'background-color':ColorArr[ind]});
       });
     });
   });  $("#Color td > img").ubind('click');

});
});
</script>

Последний раз редактировалось Deff, 21.01.2013 в 04:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить в событие, указатель на объект, который получает это событие? Pacan228 Общие вопросы Javascript 2 04.07.2012 19:53
Как вставить текст в Div alex2012 Общие вопросы Javascript 5 01.06.2012 23:09
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
Подскажите как мне вставить таблицу на сайт Sohne Серверные языки и технологии 5 06.10.2011 19:12
Как вставить изображение в документ, не используя таблицу? возжаждавший Элементы интерфейса 1 05.03.2010 19:36