Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Как динамически устанавливать стили для DIV-a ?

Автор: t77 15.2.2009, 12:58

Доброе время суток. На странице имеется 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

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

Автор: t77 15.2.2009, 13:39

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

Автор: bars80080 16.2.2009, 00:01

ну, как. вызов обработчика: <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

Идея понятна! Но только не в <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";                                                                                                                                                                                                                                 }                                         }                                                                              } Вы знаете, работает! Только не так как хотелось бы...   Проблемка в том, что если двигать полосу прокрутки вверх и вниз, мышкой, то в верхней части таблицы(между Header таблицы и верхней части DIV-а) видны уходящие вверх строки.Это выглядит ужасно!!!   Может кто-нибудь знает в чем проблема и как ее решить?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)