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

Тема в разделе "Другие языки", создана пользователем SpaceW, 28 июл 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. SpaceW

    SpaceW Постоялец

    Регистр.:
    27 сен 2007
    Сообщения:
    95
    Симпатии:
    45
    Здравствуйте!

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

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

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

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Код:
    <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 - можно сделать плавающий, т.е. вывести в любом месте страницы.
     
    SpaceW нравится это.
  3. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102

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

    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 как описано в посте выше
     
    SpaceW нравится это.
  4. polyetilen

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

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    например по всем строкам в таблице пройти и в каждой строке для нужной колонки поставить стиль 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 нравится это.
  5. SpaceW

    SpaceW Постоялец

    Регистр.:
    27 сен 2007
    Сообщения:
    95
    Симпатии:
    45
    Спасибо, за столь оживленную реакцию! Попробовал все варианты, понял, что для меня самый эффективный - это использование jquery, действует просто отлично!
     
  6. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Все предложенные варианты однотипны, просто реализованы по разному, но я бы не советовал для такого простого скрипта брать jquery

    Перейти по ссылке - весит 160 кб.

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

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

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
  8. to0x

    to0x V.I.P.

    Регистр.:
    9 апр 2006
    Сообщения:
    684
    Симпатии:
    740
    вопрос, в общем-то про тот же onclick, как сделать чтоб при нажатии на этом месте высвечивался текст и открывалась страница партнёрки?!

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

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Код:
    [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 нравится это.
  10. to0x

    to0x V.I.P.

    Регистр.:
    9 апр 2006
    Сообщения:
    684
    Симпатии:
    740
    сайт открывает, но не в новом окне, а текст не меняет.

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

    Код:
    
    <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>
    работает, открывает в новом окне итд, но текст "Показать купон" как стоял так и стоит
     
Статус темы:
Закрыта.