VPF::Динамическое сокрытие столбцов таблицы

SamDark

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

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

Загрузка ...

Добрый кот

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

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

Необходимо реализовать кроссбразуерное(IE+FF+Opera) динамическое сокрытие столбца таблицы.

Пробовал всякое, но пока не выходит...

Код


<html>
    <head>
        <title>hide columns</title>
        <style>
            td{
                border: 1px solid black;
            }
    
       .vis {display: table-cell}
       .invis { display: none}

        </style>
    </head>
    <script language="javascript">
    function changeView() {
        var elm = document.getElementsByName("col5")
            for (var i=0; i < elm.length; i++) {
                elm[i].className = "vis";
                alert(elm[i].className);
            }
    }
    </script>
    <body>
        <table>
            <tr>
                <td name="col1" class="vis">col1</td>
                <td name="col2" class="vis">col2</td>
                <td name="col3" class="vis">col3</td>
        <td name="col4" class="vis">col4</td>
            <td name="col5" class="invis">col5</td>
                <td name="col6">col6</td>
                <td name="col7">col7</td>
            <td name="col8">col8</td>
            <td name="col9">col9</td>
                <td name="col10">col10</td>
                <td name="col11">col11</td>
            <td name="col12" class="invis">col12</td>
            </tr>
            <tr>
                <td name="col1" class="vis">col1</td>
                <td name="col2" class="vis">col2</td>
                <td name="col3" class="vis">col3</td>
            <td name="col4" class="vis">col4</td>
            <td name="col5" class="invis">col5</td>
                <td name="col6">col6</td>
                <td name="col7">col7</td>
            <td name="col8">col8</td>
            <td name="col9">col9</td>
                <td name="col10">col10</td>
                <td name="col11">col11</td>
            <td name="col12" class="invis">col12</td>
            </tr>
            <tr>
                <td name="col1" class="vis">col1</td>
                <td name="col2" class="vis">col2</td>
                <td name="col3" class="vis">col3</td>
            <td name="col4" class="vis">col4</td>
            <td name="col5" class="invis">col5</td>
                <td name="col6">col6</td>
                <td name="col7">col7</td>
            <td name="col8">col8</td>
            <td name="col9">col9</td>
                <td name="col10">col10</td>
                <td name="col11">col11</td>
        <td name="col12" class="invis">col12</td>
            </tr>
        </table>
    <a href="javascript:changeView()">Show col5</a>
    </body>
</html>

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

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

Avb

Дата 26.7.2006, 16:06 (ссылка)

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

Загрузка ...

Шустрый

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

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

Согласно спецификации html4.01, атрибут name допустим лишь у следующих элементов: BUTTON, TEXTAREA, APPLET, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM, META.

Хотя в FF работает, но это не обязательно. Поэтому у тебя и нет кроссбраузерности.

Вот побыстрому переделал твой код как вариант. Так работает (IE+FF+Opera):

Код


<html>
    <head>
        <title>hide columns</title>
        <style>
            td{
                border: 1px solid black;
            }
    
       .vis {display: table-cell}
       .invis { display: none}
        </style>
    </head>
    <script language="javascript">
    function changeView() {
    var table = document.getElementById("table1");
    var trs = table.getElementsByTagName("tr");
            for (var i=0; i < trs.length; i++) {
                document.getElementById("col5_"+(i+1)).className = "vis";
            }
    }
    </script>
    <body>
        <table id="table1">
            <tr>
                <td id="col1_1" class="vis">col1</td>
                <td id="col2_1" class="vis">col2</td>
                <td id="col3_1" class="vis">col3</td>
        <td id="col4_1" class="vis">col4</td>
            <td id="col5_1" class="invis">col5</td>
                <td id="col6_1">col6</td>
                <td id="col7_1">col7</td>
            <td id="col8_1">col8</td>
            <td id="col9_1">col9</td>
                <td id="col10_1">col10</td>
                <td id="col11_1">col11</td>
            <td id="col12_1" class="invis">col12</td>
            </tr>
            <tr>
                <td id="col1_2" class="vis">col1</td>
                <td id="col2_2" class="vis">col2</td>
                <td id="col3_2" class="vis">col3</td>
            <td id="col4_2" class="vis">col4</td>
            <td id="col5_2" class="invis">col5</td>
                <td id="col6_2">col6</td>
                <td id="col7_2">col7</td>
            <td id="col8_2">col8</td>
            <td id="col9_2">col9</td>
                <td id="col10_2">col10</td>
                <td id="col11_2">col11</td>
            <td id="col12_2" class="invis">col12</td>
            </tr>
            <tr>
                <td id="col1_3" class="vis">col1</td>
                <td id="col2_3" class="vis">col2</td>
                <td id="col3_3" class="vis">col3</td>
            <td id="col4_3" class="vis">col4</td>
            <td id="col5_3" class="invis">col5</td>
                <td id="col6_3">col6</td>
                <td id="col7_3">col7</td>
            <td id="col8_3">col8</td>
            <td id="col9_3">col9</td>
                <td id="col10_3">col10</td>
                <td id="col11_3">col11</td>
        <td id="col12_3" class="invis">col12</td>
            </tr>
        </table>
    <a href="javascript:changeView()">Show col5</a>
    </body>
</html>

Еще есть различные реализации функции getElementsByClassName.
Я, например, использую ее из библиотеки prototype.js. Тогда каждому столбцу можно задать свой класс, и отбирать элементы по этому признаку.

S.A.P.

Дата 26.7.2006, 16:10 (ссылка)

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

Загрузка ...

Эксперт

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

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

вот накидал пример.

Код


<table id="tbl" border="1">
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
</table>
<script type="text/javascript">
    function col_iterate(table, index, callback)
    {
        for (var i = 0; i < table.rows.length; i++)
        {
            callback(table.rows[i].cells[index]);
        }
    }
    
    col_iterate // скрываем столбец с индексом 1
    (
        document.getElementById('tbl'), 1, 
        function (cell)
        {
            cell.style.display = 'none';
        }
    )
</script>

только тут есть нетривиальность с объединёнными ячейками.

SamDark

Дата 27.7.2006, 07:42 (ссылка)

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

Загрузка ...

Добрый кот

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

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

Avb
Спасибо за объяснения.

S.A.P.
Спасибо за замечательный пример.

Финальная версия:

Код


<style>
td{
    border: 1px solid black;
}
    
.vis {display: table-cell}
.invis { display: none}

</style>
<script type="text/javascript">
    function col_iterate(table, index, callback){
        for (var i = 0; i < table.rows.length; i++){
            callback(table.rows[i].cells[index]);
        }
    }
</script>
<table id="tbl" border="1">
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td>
</tr>
</table>
<a href="javascript:col_iterate(document.getElementById('tbl'), 1, function (cell){cell.className = 'invis';});">Hide!</a>
<a href="javascript:col_iterate(document.getElementById('tbl'), 1, function (cell){cell.className = 'vis';});">Show!</a>

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

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

JSman

Дата 4.8.2006, 18:10 (ссылка)

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

Загрузка ...

Опытный

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

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

предлагаю задуматься об использовании тегов COL. по моему проще менять их стиль. 2 строчки и готово.

12345c

Дата 5.8.2006, 01:13 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Код

<b>Сокрытие столбцов</b><br>
<br><input type=checkbox onclick=ff(this,1)>
<input type=checkbox onclick=ff(this,2)>
<input type=checkbox onclick=ff(this,3)>
<table cellspacing=0 class=th id=t2>
  <tr><td class=h1>111</td><td class=h2>222</td><td class=h3>333</td></tr>
  <tr><td class=h1>111</td><td class=h2>222</td><td class=h3>333</td></tr>
  <tr><td class=h1>111</td><td class=h2>222</td><td class=h3>333</td></tr>
</table>
<script>ff=function(t,x){
  (tt=d.getElementById('t2')).className
    =t.checked?tt.className+' th'+x:tt.className.replace(new RegExp(' th'+x),'');
}</script>
<style>.th{border:1px solid}
.th1 .h1,.th2 .h2,.th3 .h3{display:none}
</style>

Демо - http://js2.ru/example/JsPrimeryCode-89.htm

Это сообщение отредактировал(а) 12345c - 3.3.2008, 14:42

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

S.A.P.

Дата 5.8.2006, 09:27 (ссылка)

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

Загрузка ...

Эксперт

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

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

Цитата(JSman @ 4.8.2006, 18:10

)

предлагаю задуматься об использовании тегов COL. по моему проще менять их стиль. 2 строчки и готово.

пробовал. Цвет, шрифт поменять можно, а как насчёт скрытия?

JSman

Дата 5.8.2006, 12:03 (ссылка)

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

Загрузка ...

Опытный

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

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

пусть есть .colstyle {display:none;}

someCol.className = "colstyle";

ты же заранее знаешь сколько у тебя колонок. вот и напиши

<COL ID="COL1">
<COL ID="COL2">

и тд

а затем найди элемент по ID и примени класс

S.A.P.

Дата 5.8.2006, 12:34 (ссылка)

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

Загрузка ...

Эксперт

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

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

JSman, то, что ты сейчас написал будет работать только в IE.

SamDark

Дата 9.8.2006, 11:14 (ссылка)

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

Загрузка ...

Добрый кот

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

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

S.A.P.
Подтверждаю.

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

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

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