Jump to content

Avihr

Newbie
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Everything posted by Avihr

  1. Avihr
    Большое спасибо, помогло. Так было в учебном примере, который я нашел и адаптировал. А т.к. не специализируюсь на JS и WEB-технологиях, то матчасть пока "не выучил"... Еще раз спасибо.
  2. Avihr
    Я специально выложил полный текст файла и достаточно детально описал назначение данного теста. Мне кажется там ВСЁ понятно. Скопировав текст в файл и открыв его в браузере IE можно посмотреть, что/как работает в IE. Потом, соответственно, сравнить в Опере или FF. Если такой возможности нет, то дополнительно поясняю. В IE при нажатии на сслыку Only у любой из колонок - таблица динамически перерисовывается и на экране остаются первая колонка таблицы и та колонка, в которой нажали на ссылку Only. Все остальные колонки скрываются. При последующем нажатии на ссылку All все скрытые колонки заново отображаются. В Опере и FF колонки тоже скрываются, НО при этом происходит модификация структуры таблицы, при которой первая и выбранная колонки отображаются в ОДНОЙ колонке, в которой последовательно перемешаны значения ячеек из первой и выбранной колонки. Почему так происходит я понять и не могу. Последующее отображение всех скрытых колонок (ссылка All) срабатывает "почти" нормально. "Почти" - это тоже не понятное мне объединение ячеек в группе колонок (3а и 3б), помеченных одним классом Cl_3. При начальном выводе таблицы в Опере и FF такого объединения ячеек не наблюдается. Что такое extJs сейчас посмотрю, вдруг там это решено не очень сложно, т.к. я не сильно большой специалист по JS
  3. Avihr
    Добрый день, пожалуйста, подскажите Новичку! Задача. Есть достаточно большая таблица, которая должна быть пригодна для ручного редактирования в Визивиг-редакторе системы CMS. При показе ее на сайте должна отображаться только самая левая колонка ПЛЮС еще одна колонка(группа колонок), зависящая от выбранного пользователем варианта. Поискав на разных форумах нашел что-то подобное, что вроде бы должно работать одинаково в основных браузерах. Адаптировал найденное под нашу задачу, проверяя работу под IE. НО потом оказалось, что в Опере и FF скрипты работают, но несколько по другому. ПОЧЕМУ - понять не могу. Прошу помощи в исправлении ошибки. Буду благодарен, если предложите идею и/или пример другой реализации данной задачи (например, через jQuery). Во вложении HTML-файл с задействованными скриптами и примером, который прекрасно работает в IE8. Реализовано через замену класса у ячеек таблицы. По классу в CSS определяется видимость/невидимость ячеек колонки. При работе в Опере и FF скрипты отрабатывают, классы и видимость меняются, НО html-структура самой таблицы отрисовывается браузером по другому - видимые ячейки "вытягиваются" в одну колонку. В IE такого эффекта нет. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru"> <head> <title>ТЕСТ - Скрытие/Раскрытие колонок таблицы с помощью Javascript</title> <meta http-equiv="content-type" content="text/html;charset=windows-1251"> <style type="text/css"> .side {background:#5ba; display:block} td.on {background:#5ba; display:block} td.off {display:none} </style> </head> <body> <div> <h2>Тест. Скрытие/Раскрытие колонок с помощью Javascript.</h2> <p> Нажмите на ссылку <b>Only</b> в разных колонках - Должна остаться самая левая <b>И</b> выбранная колонки, а остальные колонки должны скрыться.<br> Нажмите на ссылку <b>All</b> - Все ранее скрытые колонки должны отобразиться.<br> Текущая, т.е. ранее выбранная колонка, при этом отображается отличным от других колонок цветом, как и первая колонка. </p> </div> <table id="pricetable" border="1" align="left" widht="40%"> <tfoot> <tr align="center"> <td class="side" align="left">Включить ОДНУ колонку</td> <td class="Cl_1"> <a href="#" onclick="activateThisColumn('Cl_1');return false;">Only</a></td> <td class="Cl_2"> <a href="#" onclick="activateThisColumn('Cl_2');return false;">Only</a></td> <td class="Cl_3"> <a href="#" onclick="activateThisColumn('Cl_3');return false;">Only</a></td> <td class="Cl_3"> <a href="#" onclick="activateThisColumn('Cl_3');return false;">Only</a></td> <td class="Cl_4"> <a href="#" onclick="activateThisColumn('Cl_4');return false;">Only</a></td> <td class="Cl_5"> <a href="#" onclick="activateThisColumn('Cl_5');return false;">Only</a></td> <td class="Cl_6"> <a href="#" onclick="activateThisColumn('Cl_6');return false;">Only</a></td> <td class="Cl_7"> <a href="#" onclick="activateThisColumn('Cl_7');return false;">Only</a></td> </tr> <tr align="center"> <td class="side" align="left">Включить ВСЕ колонки</td> <td class="Cl_1"> <a href="#" onclick="displayAllColumn('Cl_1');return false;">All</a></td> <td class="Cl_2"> <a href="#" onclick="displayAllColumn('Cl_2');return false;">All</a></td> <td class="Cl_3"> <a href="#" onclick="displayAllColumn('Cl_3');return false;">All</a></td> <td class="Cl_3"> <a href="#" onclick="displayAllColumn('Cl_3');return false;">All</a></td> <td class="Cl_4"> <a href="#" onclick="displayAllColumn('Cl_4');return false;">All</a></td> <td class="Cl_5"> <a href="#" onclick="displayAllColumn('Cl_5');return false;">All</a></td> <td class="Cl_6"> <a href="#" onclick="displayAllColumn('Cl_6');return false;">All</a></td> <td class="Cl_7"> <a href="#" onclick="displayAllColumn('Cl_7');return false;">All</a></td> </tr> </tfoot> <tbody> <tr align="center"> <td class="side">Ряд_1 Колонка_0</td> <td class="Cl_1">1-1</td> <td class="Cl_2">1-2</td> <td class="Cl_3">1-3a</td> <td class="Cl_3">1-3b</td> <td class="Cl_4">1-4</td> <td class="Cl_5">1-5</td> <td class="Cl_6">1-6</td> <td class="Cl_7">1-7</td> </tr> <tr align="center"> <td class="side">Ряд_2 Колонка_0</td> <td class="Cl_1">2-1</td> <td class="Cl_2">2-2</td> <td class="Cl_3">2-3a</td> <td class="Cl_3">2-3b</td> <td class="Cl_4">2-4</td> <td class="Cl_5">2-5</td> <td class="Cl_6">2-6</td> <td class="Cl_7">2-7</td> </tr> <tr align="center"> <td class="side">Ряд_3 Колонка_0</td> <td class="Cl_1">3-1</td> <td class="Cl_2">3-2</td> <td class="Cl_3">3-3a</td> <td class="Cl_3">3-3b</td> <td class="Cl_4">3-4</td> <td class="Cl_5">3-5</td> <td class="Cl_6">3-6</td> <td class="Cl_7">3-7</td> </tr> <tr align="center"> <td class="side">Ряд_4 Колонка_0</td> <td class="Cl_1">4-1</td> <td class="Cl_2">4-2</td> <td class="Cl_3">4-3a</td> <td class="Cl_3">4-3b</td> <td class="Cl_4">4-4</td> <td class="Cl_5">4-5</td> <td class="Cl_6">4-6</td> <td class="Cl_7">4-7</td> </tr> <tr align="center"> <td class="side">Ряд_5 Колонка_0</td> <td class="Cl_1">5-1</td> <td class="Cl_2">5-2</td> <td class="Cl_3">5-3a</td> <td class="Cl_3">5-3b</td> <td class="Cl_4">5-4</td> <td class="Cl_5">5-5</td> <td class="Cl_6">5-6</td> <td class="Cl_7">5-7</td> </tr> <tr align="center"> <td class="side">Ряд_6 Колонка_0</td> <td class="Cl_1">6-1</td> <td class="Cl_2">6-2</td> <td class="Cl_3">6-3a</td> <td class="Cl_3">6-3b</td> <td class="Cl_4">6-4</td> <td class="Cl_5">6-5</td> <td class="Cl_6">6-6</td> <td class="Cl_7">6-7</td> </tr> <tr align="center"> <td class="side">Ряд_7 Колонка_0</td> <td class="Cl_1">7-1</td> <td class="Cl_2">7-2</td> <td class="Cl_3">7-3a</td> <td class="Cl_3">7-3b</td> <td class="Cl_4">7-4</td> <td class="Cl_5">7-5</td> <td class="Cl_6">7-6</td> <td class="Cl_7">7-7</td> </tr> </tbody> </table> </body> <script type="text/javascript"> /* For functions getElementsByClassName, addClassName, and removeClassName Copyright Robert Nyman, http://www.robertnyman.com Free to use if this text is included */ function getElementsByClassName(className, tag, elm){ var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; } function addClassName(elm, className){ var currentClass = elm.className; if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){ elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className; } return elm.className; } function removeClassName(elm, className){ var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i"); elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, ""); return elm.className; } function activateThisColumn(column) { var table = document.getElementById('pricetable'); //remove the 'on' class from all other td's var tds = table.getElementsByTagName('td'); for (var m=0; m<tds.length; m++) { removeClassName(tds[m], 'on'); addClassName(tds[m], 'off'); } //add the class 'on' to the selected td var newtds = getElementsByClassName(column, 'td', table); for (var i=0; i<newtds.length; i++) { removeClassName(newtds[i], 'off'); addClassName(newtds[i], 'on'); } //remove the class 'off' to the selected td var newtds = getElementsByClassName('side', 'td', table); for (var i=0; i<newtds.length; i++) { removeClassName(newtds[i], 'off'); } for (var i=0; i<newtds.length; i++) { addClassName(newtds[i], 'on'); } } function displayAllColumn(column) { var table = document.getElementById('pricetable'); //remove the 'off' class from all other td's var tds = table.getElementsByTagName('td'); for (var m=0; m<tds.length; m++) { removeClassName(tds[m], 'off'); } } </script> </html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept