Форум

mcavalon · #1 (**permalink**) 13.12.2011, 19:15

добрый вечер

прошу вашей помощи.

ситуация следующая: есть таблица (поле1,поле2, цена,...) и есть чекбокс.

задача: при нажатии на чекбокс скрыть колонку "цена"

работает так: в каждом теге td колонки цена у меня стоят теги div.
при нажатии на чекбокс я в цикле скрываю эти дивы.

проблема: как сделать при нажатии на чекбокс чтобы теги td меняли свою ширину на 0 или вообще просто скрывались

trikadin · #2 (**permalink**) 13.12.2011, 19:19

div.style.display= "none"

Aetae · #3 (**permalink**) 13.12.2011, 19:26

Вообще это делается по-другому:

<style>
.noprice td:last-child {display:none}
</style>
<table onclick="className=className?'':'noprice'">
  <tr><td>поле1</td><td>поле2</td><td> цена</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>

Стили и классы естесно свои придумать.

mcavalon · #4 (**permalink**) 13.12.2011, 19:27

у меня так и работает. мне нужно уменьшить ширину столбца, чтобы соседний столбец увеличился

Aetae · #5 (**permalink**) 13.12.2011, 19:31

mcavalon,

<style>
.noprice td:last-child {display:none}
</style>
<table style="width:100%" onclick="className=className?'':'noprice'">
  <tr><td>поле1</td><td>поле2</td><td> цена</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>

рони · #6 (**permalink**) 13.12.2011, 19:35

mcavalon,
Вариант ...

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table border="1" bordercolor="#000000"  width="100" height="100">
  <tr>
    <td>1</td>
    <td><div>11</div></td>
  </tr>
  <tr>
    <td>2</td>
    <td><div>22</div></td>
  </tr>
</table>
<script  type="text/javascript">
divs = document.body.getElementsByTagName('div')
for (var i=0; i<divs.length; i++)  {
    var parent = divs[i].parentNode;
    divs[i].style.display = "none"
    parent.style.display = "none"
}
</script>
</body>
</html>

Nekromancer · #7 (**permalink**) 13.12.2011, 20:26

Я конечно понимаю, что кроссбраузерность зло в наше дни

Да и извращения все любят.
Но чем вот так не работает:

<style>
.first-col {
background: red;
}
.second-col {
background: blue;
}
table {
width: 100%;
}
td {
height: 30px;
padding: 0;
}
.hide-some-col .second-col {
width: 0;
}
</style>
<table id="my-table">
<col class="first-col">
<col class="second-col">
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
<a href="" onclick="document.getElementById('my-table').className = 'hide-some-col'; return false">Click me</a>

Aetae · #8 (**permalink**) 13.12.2011, 21:33

Nekromancer,
Именно из-за кроссбраузерности.
Ваш вариант кажись тока в фф и будет работать, лень проверять.

Я же привел лишь концепцию. Совершенно необязательно использовать :last-child можно просто навесить доп. классы, мне просто лень было.)

рони,
Ваш вариант - первый, что приходит в голову. И самый медленный. К тому же совершенно непонятно зачем скрывать div, предок которого и так скрыт.

Nekromancer · #9 (**permalink**) 13.12.2011, 22:04

Aetae,
Да, не кроссбраузерно, извиняюсь. Как всегда стараюсь увидеть ошибку в чужом коде, а не в своём )

devote · #10 (**permalink**) 13.12.2011, 22:37

рони,

parent.style.display = "none"

Inline script thread
Uncaught exception: ReferenceError: Security error: attempted to read protected variable: style
Error thrown at line 6, column 4 in [url]http://lookatcode.com/showhtml:[/url]
    parent.style.display = "none"

Nekromancer,
твой пример не пашет у меня в Opara 11.60

Форум

Справочник

Discord чат

Курсы javascript