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

Статус
В этой теме нельзя размещать новые ответы.

SpaceW

Постоялец
Регистрация
27 Сен 2007
Сообщения
96
Реакции
45
Здравствуйте!

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

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

Может кто-нибудь решал такую задачу или знает как сделать?
(еще бы хорошо было, что бы работало под ie, ff и opera)
 
Код:
<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 - можно сделать плавающий, т.е. вывести в любом месте страницы.
 
Здравствуйте!
Ситуация такая: есть таблица из 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 как описано в посте выше
 
например по всем строкам в таблице пройти и в каждой строке для нужной колонки поставить стиль 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>
 
Спасибо, за столь оживленную реакцию! Попробовал все варианты, понял, что для меня самый эффективный - это использование jquery, действует просто отлично!
 
Спасибо, за столь оживленную реакцию! Попробовал все варианты, понял, что для меня самый эффективный - это использование jquery, действует просто отлично!

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

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

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

надо для реф-ссылок с купон-кодом, чтоб этот номер купона показывался только после нажатия div-бокса, где скажем стоит "показать купон", а после нажатия открывается сайт партнёрки, исчезает текст "показать купон" а на его месте стоит номер купона...
 
Код:
[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
сайт открывает, но не в новом окне, а текст не меняет.

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

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