VPF::Задание стиля для колоны в таблице

sinij

Дата 26.10.2007, 11:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 5.10.2005
Где: Украина, Киев

Репутация: нет
Всего: нет

Подскажите как динамически поменять стиль для произвольной колоны в таблице?

Желательно используя JQuery.

Это сообщение отредактировал(а) sinij - 26.10.2007, 12:32

ksnk

Дата 26.10.2007, 16:00 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

F А фига тут jQuery? Задавай каждую ячейку таблицы с классом column1, column2, columnx... и меняй правила в css'е как-нибудь так:

Код


<table><tr>
   <td class="row1 column1">...</td><td class="row1 column2">...</td> ...
</tr><tr>
   <td class="row2 column1">...</td><td class="row2 column2">...</td> ...
</table>

впрочем, можно и по ячейкам пробежаться, но так, имхо, правильнЕе...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

AKS

Дата 26.10.2007, 17:45 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: нет
Всего: 52

Цитата(ksnk @ 26.10.2007, 16:00

)

F А фига тут jQuery?

Да Вы что? Сейчас jQuery - это "наше все"! )))))))))))))))))))))))))))

sinij

Дата 27.10.2007, 17:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 5.10.2005
Где: Украина, Киев

Репутация: нет
Всего: нет

если таблица 100Х100 то размер документа при добавлении класса к каждой ячейке увеличивает его на 20-30% вот почему хочется узнать как можно по номеру колоны раскрасить ее.

SamDark

Дата 27.10.2007, 17:58 (ссылка)

(нет голосов)

Загрузка ...

Добрый кот

Профиль
Группа: Участник
Сообщений: 1424
Регистрация: 25.7.2006
Где: Voronezh

Репутация: нет
Всего: 38

sinij,

Код


<table>
    <col style="color: #f00">
    <col style="color: #0f0">
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat   v  olutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
   </tr>
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat   v  olutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
   </tr>
</table>

--------------------

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

SelenIT

Дата 27.10.2007, 19:15 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: нет
Всего: 401

SamDark, все бы хорошо, только как заставить это работать в FF/Opera/Safari?

У меня получилось вот как:

Код


<script type="text/javascript">
try {
   window.addEventListener('load', function() {
      var tables = document.getElementsByTagName('table');
      for (var t=0, tbl; tbl=tables[t]; t++) {
         var cols = tbl.getElementsByTagName('col');
         for (var i=0, r; r=tbl.rows[i]; i++) {
            for (var j=0, k=0, c; c=r.cells[j]; j++, k+=c.colSpan) {
               if (cols[k] && cols[k].style) c.setAttribute('style', cols[k].style.cssText);
            }
         }
      }
   }, false);
} catch(e) { /* IE - и так работает ;) */ }
</script>
<table>
    <col style="color:red;">
    <col style="color:green;">
    <col style="color:blue;">
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
   </tr>
   <tr>
    <td colspan="2">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
    </td>
   </tr>
</table>

Это сообщение отредактировал(а) SelenIT - 27.10.2007, 20:17

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

SamDark

Дата 29.10.2007, 15:44 (ссылка)

(нет голосов)

Загрузка ...

Добрый кот

Профиль
Группа: Участник
Сообщений: 1424
Регистрация: 25.7.2006
Где: Voronezh

Репутация: нет
Всего: 38

SelenIT,
Я немного описался в коде:

Код


<table>
    <col style="background-color: #f00">
    <col style="background-color: #0f0">
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat   v  olutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
   </tr>
  <tr>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat   v  olutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
    </td>
   </tr>
</table>

--------------------

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

SelenIT

Дата 29.10.2007, 15:53 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: нет
Всего: 401

Да, с фонами работает. А вот с параметрами шрифта или выравниванием текста - уже нет. Маловато как-то возможностей...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ksnk

Дата 29.10.2007, 16:23 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Цитата(AKS @ 26.10.2007, 17:45

)

Да Вы что? Сейчас jQuery - это "наше все"! )))))))))))))))))))))))))))

Цитата(sinij @ 27.10.2007, 17:19

)

если таблица 100Х100...

Таки да! ;) В некоторых случаях может помочь только он. Можно пробежаться по всем ячейкам и проставить туда необходимые классы вручную. (считаем, что у таблицы id='tab')

Код


<script>
$(function(){
  $('#tab tr').each(function(row){
    $(this).find('td').each(function(col){
      $(this).addClass('row'+row).addClass('column'+col)
    })
  })
})

Это сообщение отредактировал(а) ksnk - 29.10.2007, 16:23

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

AKS

Дата 29.10.2007, 18:32 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: нет
Всего: 52

Цитата(SelenIT @ 29.10.2007, 15:53

)

Маловато как-то возможностей...

Во-о-о! Маловато возможностей в этом плане у новых браузеров. А IE позволит "разукрасить" табличку, если обратиться лишь к <colgroup>. Дает "прикурить", старик. smile

Цитата(ksnk @ 29.10.2007, 16:23

)

Таки да! ;) В некоторых случаях может помочь только он.

Не так-то все просто, однако. :(
Вот, взял пример таблицы из specs:

Код


<TABLE id='tab' border="1" summary="">
    <CAPTION>
        <EM>A test table with merged cells</EM>
    </CAPTION>
        <COL class='column0'>
        <COL span='2' class='column1'>
        <COL class='column2'>
    <TR>
        <TH rowspan="2">
        <TH colspan="2">Average
        <TH rowspan="2">Red<BR>eyes
    <TR>
        <TH>height<TH>weight
    <TR>
        <TH>Males
        <TD>1.9
        <TD>0.003
        <TD>40%
    <TR>
        <TH>Females
        <TD>1.7
        <TD>0.002
        <TD>43%
</TABLE>

Увидеть разницу можно, задав сначала такой стиль:

Код


.column0 {
    background-color:blue;
}
.column1 {
    background-color:green;
}
.column2 {
    background-color:red;
}

, а потом заменить background-color на color, и запустить скрипт...

Это сообщение отредактировал(а) AKS - 29.10.2007, 18:33

SelenIT

Дата 29.10.2007, 22:00 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: нет
Всего: 401

Цитата(AKS @ 29.10.2007, 18:32

)

IE позволит "разукрасить" табличку...

Да здравствует IE - самый гламурный браузер в мире! smile

Шучу

. Если серьезно, у меня к "волшебному ослику" противоречивые чувства". Насчет "разукрасить" он, действительно, впереди планеты всей - одни фильтры чего стоят. Да и в скриптовой модели многое действительно сделано удобнее, чем по стандарту (напр., текущий стиль имхо впрямь логичнее считывать у самого элемента, чем какого-то левого свойства документа). Но вопиющая нелогичность интерпретации элементарных HTML- и CSS-конструкций при простейшей, казалось бы, верстке (причуды hasLayout-а, прыжки float-ов и т.п.) иногда просто доводят до белого каления smile

Цитата(AKS @ 29.10.2007, 18:32

)

Увидеть разницу можно...

А вот в предложенном мной варианте - нельзя smile

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

AKS

Дата 30.10.2007, 07:55 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: нет
Всего: 52

Цитата(SelenIT @ 29.10.2007, 22:00

)

Если серьезно, у меня к "волшебному ослику" противоречивые чувства".

Да это я так уж. Надо иногда и ему отдать должное, когда все вокруг "трубят", что он ..., ну этот самый, короче. smile

Цитата(SelenIT @ 29.10.2007, 22:00

)

Да и в скриптовой модели многое действительно сделано удобнее...

Не только удобнее, а иногда быстрее. Даже быстрее, чем в самом быстром. ;)
Я на днях, между делом, сравнил скорость работы метода replace в одном частном случае. Так вот в IE поиск совпадений и замена происходил раз в 10 быстрее, чем в Opera. Шокирующий факт, однако (для опера'тивных разработчиков). ;)

Цитата(SelenIT @ 29.10.2007, 22:00

)

А вот в предложенном мной варианте - нельзя smile.

Из-за того, что используются стилевые классы вместо инлайн-стиля? А Вы бы вставили style вместо class...

SelenIT

Дата 30.10.2007, 18:39 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: нет
Всего: 401

Цитата(AKS @ 30.10.2007, 07:55

)

Не только удобнее, а иногда быстрее.

Регулярки в нем страсть как хороши! smile

А в "самом быстром" - наоборот...
Но Safari (тот, что третий бета под винду) скоростью в целом тоже радует. Если б не этот дурацкий антиалайзинг текста...

Цитата(AKS @ 30.10.2007, 07:55

)

Из-за того, что используются стилевые классы вместо инлайн-стиля?

У меня они не используются). У меня имитируется поведение инлайн-стилей для <col> в IE (указанный стиль тупо присваивается ячейкам с учетом предшествующих colspan-ов - но я проверял, работает с приемлемой скоростью даже на довольно больших таблицах).

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

cruelangel

Дата 30.10.2007, 20:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 319
Регистрация: 12.9.2007

Репутация: нет
Всего: 8

с регулярками у ие куча глюков. мне не нужна скорость такой ценой.

AKS

Дата 30.10.2007, 21:02 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: нет
Всего: 52

Цитата(SelenIT @ 30.10.2007, 18:39

)

У меня они не используются). У меня имитируется поведение инлайн-стилей для <col>...

Это-то очевидно. Я просто на той таблице проверил - у меня не получилось корректной раскраски. Может чего не так сделал...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »