JS: Спрятать-показать столбец у таблицы

SpaceW · 28 Июл 2010

Здравствуйте!

Ситуация такая: есть таблица из 14 столбцов, над таблицей 5 чекбоксов, при отметки которых должны появляться/скрываться определенные столбцы...

Но как только не пробовал - либо показывается-прячется только ячейка первой строки (да и то содержимое скачет не понятно) либо вообще никак не работает..

Может кто-нибудь решал такую задачу или знает как сделать?
(еще бы хорошо было, что бы работало под ie, ff и opera)

bork75 · 29 Июл 2010

Код:

<script>
function showDiv(div) 
{ 
if (document.getElementById(div).style.display=="none") 
document.getElementById(div).style.display="block"; 
else 
document.getElementById(div).style.display="none"; 
} 
</script> 

<input type="checkbox" onclick="javascript:showDiv('div19')" name="C1" value="ON">


<div id="div19" style="display: none;"> Здесь может быть что угодно!
</div>

100% будет одинаково работать во всех браузерах.

div - можно сделать плавающий, т.е. вывести в любом месте страницы.

diavolic · 29 Июл 2010

SpaceW написал(а):
Здравствуйте!
Ситуация такая: есть таблица из 14 столбцов, над таблицей 5 чекбоксов, при отметки которых должны появляться/скрываться определенные столбцы...
Но как только не пробовал - либо показывается-прячется только ячейка первой строки (да и то содержимое скачет не понятно) либо вообще никак не работает..
Может кто-нибудь решал такую задачу или знает как сделать?
(еще бы хорошо было, что бы работало под ie, ff и opera)

измени структуру таблицы с

HTML:

<table>
  <tr>
    <td> данные столбец 1, строка 1 </td> <td>данные столбец 2, строка 1</td><td>данные столбец 3, строка 1</td>
  </tr>
  <tr>
    <td> данные столбец 1, строка 2 </td> <td>данные столбец 2, строка 2</td><td>данные столбец 3, строка 2</td>
  </tr>
  <tr>
    <td> данные столбец 1, строка 3 </td> <td>данные столбец 2, строка 3</td><td>данные столбец 3, строка 3</td>
  </tr>
</table>

на

HTML:

<table>
  <tr>
    <td> 
<div id="column1">
    <table> <tr><td>данные столбец 1, строка 1</td></tr> <tr><td>данные столбец 1, строка 2</td></tr> <tr><td>данные столбец 1, строка 3</td></tr></table>
</div>
    </td>
    <td> 
<div id="column2">
    <table> <tr><td>данные столбец 2, строка 1</td></tr> <tr><td>данные столбец 2, строка 2</td></tr> <tr><td>данные столбец 2, строка 3</td></tr></table>
</div>
    </td>
    <td> 
<div id="column3">
    <table> <tr><td>данные столбец 3, строка 1</td></tr> <tr><td>данные столбец 3, строка 2</td></tr> <tr><td>данные столбец 3, строка 3</td></tr></table>
</div>
    </td>
  </tr>
</table>

и дальше скрывай нужный div как описано в посте выше

polyetilen · 29 Июл 2010

например по всем строкам в таблице пройти и в каждой строке для нужной колонки поставить стиль display:none

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script type="text/javascript">
    function toggle_column(table, column_nr) {
        table = document.getElementById('table');
        rows = table.getElementsByTagName('tr');
        for (var row=0; row<rows.length;row++) {
            cels = rows[row].getElementsByTagName('td');
            cels[column_nr].style.display=cels[column_nr].style.display=="none" ? "" : "none";
        }
    }
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<input name="column" type="checkbox" value="0" onClick="toggle_column('table', this.value);" checked />
<input name="column" type="checkbox" value="1" onClick="toggle_column('table', this.value);" checked />
<input name="column" type="checkbox" value="2" onClick="toggle_column('table', this.value);" checked />
<table border="1" id="table">
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
</body>
</html>

или jquery

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#select input[type='checkbox']").click(function(){                        
            $('#table td:nth-child('+$(this).val()+')').toggleClass("hide");
        });    
    });
    </script>

    <style type="text/css">
    <!--
    .hide{display:none;}
    -->
    </style>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<form action="" method="get" id="select">
    <input name="column" type="checkbox" value="1" checked />
    <input name="column" type="checkbox" value="2" checked />
    <input name="column" type="checkbox" value="3" checked />
</form>
<table border="1" id="table">
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
</body>
</html>

SpaceW · 29 Июл 2010

Спасибо, за столь оживленную реакцию! Попробовал все варианты, понял, что для меня самый эффективный - это использование jquery, действует просто отлично!

bork75 · 29 Июл 2010

SpaceW написал(а):
Спасибо, за столь оживленную реакцию! Попробовал все варианты, понял, что для меня самый эффективный - это использование jquery, действует просто отлично!

Все предложенные варианты однотипны, просто реализованы по разному, но я бы не советовал для такого простого скрипта брать jquery

Для просмотра ссылки Войди или Зарегистрируйся - весит 160 кб.

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

polyetilen · 30 Июл 2010

да если jquery, то лучше брать сжатый вариант 71КБ

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

или скачать последнюю версию

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

to0x · 30 Июл 2010

вопрос, в общем-то про тот же onclick, как сделать чтоб при нажатии на этом месте высвечивался текст и открывалась страница партнёрки?!

надо для реф-ссылок с купон-кодом, чтоб этот номер купона показывался только после нажатия div-бокса, где скажем стоит "показать купон", а после нажатия открывается сайт партнёрки, исчезает текст "показать купон" а на его месте стоит номер купона...

bork75 · 30 Июл 2010

Код:

[COLOR="Navy"]<script language="javascript">[/COLOR]

function my_kypon()
{
kypon.outerHTML='<h3>123456</h3>';   [COLOR="DimGray"]// или innerText="123456"[/COLOR]
setTimeout ("parent.location='http://google.ru';", 2000); [COLOR="#696969"]//Запустит функцию через 2000 милисек[/COLOR]


}
[COLOR="#000080"]</script>[/COLOR]

[B]<a href="javascript:my_kypon()" id="kypon" >показать купон</a>[/B]

to0x · 31 Июл 2010

сайт открывает, но не в новом окне, а текст не меняет.

делаю немного подругому:

Код:

<script type="text/javascript">
function toggle(elem){
    if(elem.className == "popin") {
        elem.className = "popout";
    }
    else {
        elem.className = "popin";
    }
}</script>

<style type="text/css">
.popin {
    border: 1px dashed transparent;

}
.popout {

}

.popin .text {
    display: none;
}
.popout .text {
    display: block;
}
</style>


<div class="popin">
    
    <a class="button" onclick="toggle(this.parentNode)" href="<?php echo base_url ?>go/<?php echo $web["WebsiteID"] ?>/" target="blank" ref="nofollow">Показать купон</a>
        <p>
    <div class="text">
    
        Код: <strong id="coupon_code_<?php echo $coupon["CouponID"] ?>"><?php echo $coupon["CouponCode"] ?></strong>
    </div></p>
</div>

работает, открывает в новом окне итд, но текст "Показать купон" как стоял так и стоит

JS: Спрятать-показать столбец у таблицы

SpaceW

Постоялец

bork75

The Team

diavolic

Постоялец

polyetilen

Заблокирован

SpaceW

Постоялец

bork75

The Team

polyetilen

Заблокирован

to0x

V.I.P.

bork75

The Team

to0x

V.I.P.