Javascript.RU

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

Закрашивание ячеек в таблице в зависимости от данных в ячейк
Добрый вечер.
Имеется вопрос, над которым бьюсь уже неделю.
Имеется таблица 3 столбца и 3 строки. Т.Е. 9 ячеек.
Эти ячейки заполнены числами. Можно ли сделать так, чтобы в зависимости от того, какое число в ячейке, ячейка закрашивалась определенным цветом.
Например, если значение в ячейке = 1, то ячейка закрашивается в красный. А в другой ячейке значение = 8, и она закрашена в зеленый.
Заранее благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2011, 22:20
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сообщение от Gradyslav
Можно ли сделать так
Можно.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2011, 22:55
Новичок на форуме
Отправить личное сообщение для Gradyslav Посмотреть профиль Найти все сообщения от Gradyslav
 
Регистрация: 20.11.2011
Сообщений: 8

а как?
Ответить с цитированием
  #4 (permalink)  
Старый 20.11.2011, 22:57
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сообщение от Gradyslav
а как?
Хитрый, да? Скриптом. Или css-кой, если нужно заполнить один раз...
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #5 (permalink)  
Старый 20.11.2011, 23:03
Новичок на форуме
Отправить личное сообщение для Gradyslav Посмотреть профиль Найти все сообщения от Gradyslav
 
Регистрация: 20.11.2011
Сообщений: 8

Нет не хитрый) Просто надо сделать, а как не знаю.) Вот и спрашиваю совета)
Ответить с цитированием
  #6 (permalink)  
Старый 20.11.2011, 23:14
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

CSS: nth-child (не кроссбраузерно). Читать тут.

javascript:
<table id="t">
<td>1</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
</table>
<script>
arr= document.getElementById("t").getElementsByTagName("td");
colors= ["", "blue", "red", "green"];
for (var i=0; i!= arr.length; ++i) {
 arr[i].style.background=colors[arr[i].innerHTML];
}
</script>
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2011, 23:19
Новичок на форуме
Отправить личное сообщение для Gradyslav Посмотреть профиль Найти все сообщения от Gradyslav
 
Регистрация: 20.11.2011
Сообщений: 8

Спасибо за помощь)
Ответить с цитированием
  #8 (permalink)  
Старый 21.11.2011, 01:34
Новичок на форуме
Отправить личное сообщение для Gradyslav Посмотреть профиль Найти все сообщения от Gradyslav
 
Регистрация: 20.11.2011
Сообщений: 8

Подскажите пожалуйста, есть функция, которая раскрашивает ячейки в таблице, в зависимости от значений ячейки. Как сделать так, что бы две таблицы раскрашивались по разным функциям. Вот пример, но он не работает((
<html>
      <head>
      <link rel="stylesheet" href="style.css" type="text/css" />
      <script type="text/javascript" src="prototype.js"></script>
      <script type="text/javascript">
         $(document).observe('dom:loaded', function(){
     
     var arr_class = ['range1','range2','range3'];
     
     function table_colorize(elements, array_class)
     {
       elements.each(function(i, j){
            
             var  num = i.innerText || i.textContent;
          
             var  $class;
             if(num > 1.5 && num < 5.5)
                 $class = array_class[0];
             if(num > 5.4 && num <= 8.3)
                 $class = array_class[1];
             if(num >= 9.0 || num <= 1)
                 $class = array_class[2];
              
             i.addClassName($class);
        
       });
     
     };
     var first = $$('table#first td');
     
     
     table_colorize(first, arr_class);
     
        
     });
     
     
     
      </script>
     
      <link rel="stylesheet" href="style.css" type="text/css" />
      <script type="text/javascript" src="prototype.js"></script>
      <script type="text/javascript">
         $(document).observe('dom:loaded', function(){
     
     var abc_class = ['a', 'b', 'c'];
     
     function table_colorize(elements, array_class)
     {
       elements.each(function(i, j){
            
             var  num = i.innerText || i.textContent;
          
             var  $class;
           if($R(10,30).include(num))
             $class = arr_class[0];
         if($R(40,60).include(num))
             $class = arr_class[1];
         if($R(70,90).include(num))
             $class = arr_class[2];
              
             i.addClassName($class);
        
       });
     
     };
     
     var second = $$('table#second td');
     
     table_colorize(second, abc_class);
        
     });
     
     
     
      </script>
 </head>
 <body>
<table id="obsh">
<tr>
<td>
<table id="first">
    <tr>
        <td>0.7</td>
        <td>2.1</td>
        <td>3.7</td>
    </tr>
    <tr>
        <td>4.6</td>
        <td>5.5</td>
        <td>6.1</td>
    </tr>
    <tr>
        <td>7.4</td>
        <td>8.3</td>
        <td>9.4</td>
    </tr>
</table>
</td>
<td>
<table id="second">
    <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>40</td>
        <td>50</td>
        <td>60</td>
    </tr>
    <tr>
        <td>70</td>
        <td>80</td>
        <td>90</td>
    </tr>
</table>
</td></tr>
</table>
 </body>
 </html>
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2011, 01:36
Новичок на форуме
Отправить личное сообщение для Gradyslav Посмотреть профиль Найти все сообщения от Gradyslav
 
Регистрация: 20.11.2011
Сообщений: 8

Если брать две таблицы, что бы их раскрашивало по одной функции, то вот рабочий пример.
<html>
 <head> 
 <link rel="stylesheet" href="style.css" type="text/css" />
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript">
     $(document).observe('dom:loaded', function(){

var arr_class = ['range1','range2','range3'];
var abc_class = ['a', 'b', 'c'];

function table_colorize(elements, array_class)
{
  elements.each(function(i, j){
        var  num = i.innerText || i.textContent;
        var  $class;
        if($R(1,30).include(num))
             $class = array_class[0];
        if($R(40,60).include(num))
             $class = array_class[1];
        if($R(70,90).include(num))
             $class = array_class[2];
    
         i.addClassName($class);
    
  });

};
var first = $$('table#first td');
var second = $$('table#second td');

table_colorize(first, arr_class);
table_colorize(second, abc_class);
    
 });

 </script>

 
 </head>
 <body>
<table id="obsh">
<tr>
<td>
<table id="first">
    <tr>
        <td>0.7</td>
        <td>2.1</td>
        <td>3.7</td>
    </tr>
    <tr>
        <td>4.6</td>
        <td>5.5</td>
        <td>6.1</td>
    </tr>
    <tr>
        <td>7.4</td>
        <td>8.3</td>
        <td>9.4</td>
    </tr>
</table>
</td>
<td>
<table id="second">
    <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>40</td>
        <td>50</td>
        <td>60</td>
    </tr>
    <tr>
        <td>70</td>
        <td>80</td>
        <td>90</td>
    </tr>
</table>
</td></tr>
</table>
 </body>
 </html>
Ответить с цитированием
  #10 (permalink)  
Старый 21.11.2011, 07:20
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сделайте его запускаемым)
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не удается порулить шириной ячеек в таблице ctocopok Events/DOM/Window 1 24.07.2011 18:00
Сортировка числовых данных в таблице Vladsss Общие вопросы Javascript 15 01.09.2009 17:02