VPF::Как динамически устанавливать стили для DIV-a ?

t77

Дата 15.2.2009, 12:58 (ссылка)

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

Загрузка ...

Опытный

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

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

Доброе время суток.
На странице имеется for-each loop, в котором рисую таблицы. Количество таблиц может менятся и не известно заранее. Каждая из таблиц находится внутри определенного DIV-а, который также рисуется для каждой таблицы. тоесть:

Код


<!--XSL-документ-->
<xsl:for-each test="какое то условие">
<DIV>
<table>
<thead>
<tr>
<td>Название 1-ого столбца</td>
<td>Название 2-ого столбца</td>
<td>Название 3-ого столбца</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка1</td>
<td>Ячейка2</td>
<td>Ячейка3</td>
</tr>
...
...
...
</tbody>
</table>
</DIV>
</xsl:for-each>

А теперь ближе к делу...
Моя задача заключается в том, чтобы HEADER(<thead>) каждой из таблиц был зафиксирован в то время как строки таблицы могли прокручиватся, с помощью полосы прокрутки.
Так вот, дело в том, что сделать это с одной таблицой не составляет особого труда. Вот работающий пример с одной таблицей:

Код


<!-- this comment puts all versions of Internet Explorer into "reliable mode." -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FixedTableHeader</title>
<link rel="stylesheet" href="locked-column.css" type="text/css">
</head>
<body>
<div id="tbl-container" class="myDIV">
<table id="tbl">
<thead>
<tr>
    <td  class="lockTableHeader">Name</td>
    <td  class="lockTableHeader">Major</td>
    <td  class="lockTableHeader">Sex</td>
    <td  class="lockTableHeader">English</td>
    <td  class="lockTableHeader">Japanese</td>
    <td  class="lockTableHeader">Calculus</td>
    <td  class="lockTableHeader">Geometry</td>
</tr>
</thead>
<tbody>
  <tr>
    <td>Student01</td>
    <td>Languages</td>
    <td>male</td>
    <td>80</td>
    <td>70</td>
    <td>75</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Student02</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>90</td>
    <td>88</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student03</td>
    <td>Languages</td>
    <td>female</td>
    <td>85</td>
    <td>95</td>
    <td>80</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Student04</td>
    <td>Languages</td>
    <td>male</td>
    <td>60</td>
    <td>55</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Student05</td>
    <td>Languages</td>
    <td>female</td>
    <td>68</td>
    <td>80</td>
    <td>95</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Student06</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>100</td>
    <td>99</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student07</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>85</td>
    <td>68</td>
    <td>90</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student08</td>
    <td>Languages</td>
    <td>male</td>
    <td>100</td>
    <td>90</td>
    <td>90</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Student09</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>80</td>
    <td>50</td>
    <td>65</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Student10</td>
    <td>Languages</td>
    <td>male</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student11</td>
    <td>Languages</td>
    <td>male</td>
    <td>86</td>
    <td>85</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Student12</td>
    <td>Mathematics</td>
    <td>female</td>
    <td>100</td>
    <td>75</td>
    <td>70</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Student13</td>
    <td>Languages</td>
    <td>female</td>
    <td>100</td>
    <td>80</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student14</td>
    <td>Languages</td>
    <td>female</td>
    <td>50</td>
    <td>45</td>
    <td>55</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student15</td>
    <td>Languages</td>
    <td>male</td>
    <td>95</td>
    <td>35</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student16</td>
    <td>Languages</td>
    <td>female</td>
    <td>100</td>
    <td>50</td>
    <td>30</td>
    <td>70</td>
  </tr>
  <tr>
    <td>Student17</td>
    <td>Languages</td>
    <td>female</td>
    <td>80</td>
    <td>100</td>
    <td>55</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Student18</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>30</td>
    <td>49</td>
    <td>55</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Student19</td>
    <td>Languages</td>
    <td>male</td>
    <td>68</td>
    <td>90</td>
    <td>88</td>
    <td>70</td>
  </tr>
  <tr>
    <td>Student20</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>40</td>
    <td>45</td>
    <td>40</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Student21</td>
    <td>Languages</td>
    <td>male</td>
    <td>50</td>
    <td>45</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Student22</td>
    <td>Mathematics</td>
    <td>male</td>
    <td>100</td>
    <td>99</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Student23</td>
    <td>Languages</td>
    <td>female</td>
    <td>85</td>
    <td>80</td>
    <td>80</td>
    <td>80</td>
  </tr>
  </tbody>
</table>
</div> <!-- end tbl-container -->
</body>
</html>

СSS файл:

Код


.myDIV
{
    width: 400px;
    height: 200px;
    overflow: auto;
}

.lockTableHeader
{    
    background-color: navy;
    color: white;    
    position:relative;
    z-index: 30;
    top: expression(document.getElementById("tbl-container").scrollTop-2); 
}

если ID дива устанавливается динамически, следующим образом:

Код


...
...
<xsl:for-each test=".....">
<xsl:variable name="containerId" select="../@id" />
<DIV id="$containerId".............>
</DIV>
</xsl:for-each>

как считывать из файла СSS этот новоиспеченый ID дива?

bars80080

Дата 15.2.2009, 13:16 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

имхо, почему бы не вынести javascript составляющую из css файла и не поставить обычный обработчик. который к примеру по загрузке страницы оббежит все дивы и проставит нужное положение

t77

Дата 15.2.2009, 13:39 (ссылка)

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

Загрузка ...

Опытный

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

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

Не все так просто как кажется.
Я об этом думал, но как было показано выше мне необходимо задать стиль DIV-у таблицы и каждому столбцу шапки таблицы.
Возможно, делаю, что то не так...
Первая таблица работает замечательно а остальные не хотят и все!!!
Не получается!
что то я никак не соображу, что нужно сделать smile

bars80080,Можно пример ?

bars80080

Дата 16.2.2009, 00:01 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

ну, как. вызов обработчика:
<body onload="qw();">

обработчик:

Код


function qw() {
    // имхо, лучше бежать по таблицам, их стопудово будет меньше, но можно и по дивам
    var t = document.getElementsByTagName('div'); var tl = t.length;
    for(var i = 0; i < tl; i++) {
        if(t[i].className != 'myDiv') continue;
        // здесь присваиваем какое-то свойство
        t[i].style.top = '10px';
        // или метод
        t[i].on... /* что-то */ = function(){handler();};
    }
}

только я не знаю, что делает твоё экспрешн, поэтому не знаю что присвоить

t77

Дата 16.2.2009, 11:54 (ссылка)

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

Загрузка ...

Опытный

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

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

Идея понятна! Но только не в <body onload="qw();">...
Так как необходимо получать значение Top DIV-a каждый раз при изменении состояния полосы прокрутки.
Так вот, сделал следующее:
1)Задал DIV-у класс, который просто устанавливает высоту и ширину.

Код


.containerDIV
        {
        height:350px;
        overflow: auto;        
        }

Также задал DIV-у onscroll.

Код


<!--При изменении состояния полосы прокрутки выполняется данная функция-->
onscroll="myFunc(this.id,Table.id);"

Как вы советовали, всю логику фиксирования шапки вынес в функцию:

Код


function myFunc(ObjectName, tableID)
                                    {
                                        //debugger;
                                        var current_top = document.getElementById(ObjectName).scrollTop-4;
                                                                                
                                        var oTable = document.getElementById(tableID);
                                        
                                        var oRow = oTable.rows[0];
                                        for(var oColumn = 0; oColumn < oRow.cells.length; oColumn++)
                                        {
                                            var currentColumn = oRow.cells[oColumn];
                                            if(oRow.cells[oColumn].nodeName == 'TD')
                                            {                                                
                                                currentColumn.style.top = current_top;
                                                currentColumn.style.position = "relative";
                                                currentColumn.style.zIndex = "30";                                                                                                                                                                                    
                                            }
                                        }
                                        
                                    }

Вы знаете, работает! Только не так как хотелось бы... smile

Проблемка в том, что если двигать полосу прокрутки вверх и вниз, мышкой, то в верхней части таблицы(между Header таблицы и верхней части DIV-а) видны уходящие вверх строки.Это выглядит ужасно!!! smile

Может кто-нибудь знает в чем проблема и как ее решить?

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