ширина столбца
добрый вечер
прошу вашей помощи. ситуация следующая: есть таблица (поле1,поле2, цена,...) и есть чекбокс. задача: при нажатии на чекбокс скрыть колонку "цена" работает так: в каждом теге td колонки цена у меня стоят теги div. при нажатии на чекбокс я в цикле скрываю эти дивы. проблема: как сделать при нажатии на чекбокс чтобы теги td меняли свою ширину на 0 или вообще просто скрывались |
div.style.display= "none" |
Вообще это делается по-другому:
<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,
<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>
|
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>
|
Я конечно понимаю, что кроссбраузерность зло в наше дни :) Да и извращения все любят.
Но чем вот так не работает:
<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>
|
Nekromancer,
Именно из-за кроссбраузерности. Ваш вариант кажись тока в фф и будет работать, лень проверять. Я же привел лишь концепцию. Совершенно необязательно использовать :last-child можно просто навесить доп. классы, мне просто лень было.) рони, Ваш вариант - первый, что приходит в голову. И самый медленный. К тому же совершенно непонятно зачем скрывать div, предок которого и так скрыт. |
Aetae,
Да, не кроссбраузерно, извиняюсь. Как всегда стараюсь увидеть ошибку в чужом коде, а не в своём ) |
рони,
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 |
| Часовой пояс GMT +3, время: 14:33. |