При изменении видимости tr слетают параметры ее содержимого
Всем, здравствуйте!
Для строк таблицы меняю видимость (style.display). После чего, все строки съезжают, точнее пропадают выравнивание, отступы и ширина ячейки. Подскажите, пожалуйста, почему так происходит, и как это можно исправить? Любые советы принимаются с благодарностью!
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script>
function all_hide(){
$(document).find("textarea").each(function() {
this.parentElement.parentElement.style.display="none";
})
}
function all_show(){
$(document).find("textarea").each(function() {
this.parentElement.parentElement.style.display="block";
})
}
</script>
<table border = "1" cellpadding="5" width="100%">
<tr>
<td width="10%">строка 1</td>
<td width="90%" align="center"><textarea name="r1" rows="1" cols="80" id="r1"></textarea></td>
</tr>
<tr>
<td width="10%">а тут строка 2</td>
<td width="90%" align="center"><textarea name="r2" rows="1" cols="80" id="r2"></textarea></td>
</tr>
<tr>
<td width="10%">и еще вот строка 3</td>
<td width="90%" align="center"><textarea name="r3" rows="1" cols="80" id="r3"></textarea></td>
</tr>
</table>
<input type = "button" onclick = "all_show();" value = "Показать">
<input type = "button" onclick = "all_hide();" value = "скрыть">
|
Manyasha,
Цитата:
Цитата:
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script>
function all_hide(){
$(document).find("table").hide();
}
function all_show(){
$(document).find("table").show();
}
</script>
<table border="1" cellpadding="5" width="100%">
<tr>
<td width="10%">строка 1</td>
<td width="90%" align="center"><textarea name="r1" rows="1" cols="80" id="r1"></textarea></td>
</tr>
<tr>
<td width="10%">а тут строка 2</td>
<td width="90%" align="center"><textarea name="r2" rows="1" cols="80" id="r2"></textarea></td>
</tr>
<tr>
<td width="10%">и еще вот строка 3</td>
<td width="90%" align="center"><textarea name="r3" rows="1" cols="80" id="r3"></textarea></td>
</tr>
</table>
<input type="button" onclick="all_show();" value="Показать">
<input type="button" onclick="all_hide();" value="скрыть">
|
destus,
Цитата:
Извините, что привела некорректный пример! В некоторых случаях требуется скрыть не все строки, а только те, для которых выполняется какое-то условие. Похожий код применяется в нескольких местах скрипта, везде разные условия, поэтому скрывать всю таблицу мне нельзя. вот пример скрытия строк с условием (если нет текста - скрываем)
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script>
function all_hide(){
$(document).find("textarea").each(function() {
if (!this.value){this.parentElement.parentElement.style.display="none";}
})
}
function all_show(){
$(document).find("textarea").each(function() {
if (!this.value){this.parentElement.parentElement.style.display="block";}
})
}
</script>
<table border = "1" cellpadding="5" width="100%">
<tr>
<td width="10%">строка 1</td>
<td width="90%" align="center"><textarea name="r1" rows="1" cols="80" id="r1"></textarea></td>
</tr>
<tr>
<td width="10%">а тут строка 2</td>
<td width="90%" align="center"><textarea name="r2" rows="1" cols="80" id="r2"></textarea></td>
</tr>
<tr>
<td width="10%">и еще вот строка 3</td>
<td width="90%" align="center"><textarea name="r3" rows="1" cols="80" id="r3"></textarea></td>
</tr>
</table>
<input type = "button" onclick = "all_show();" value = "Показать">
<input type = "button" onclick = "all_hide();" value = "скрыть">
destus, Вы мне подали идею использовать hide()/show()! Написала вместо this.parentElement.parentElement.style.display="none"; так $(this.parentElement.parentElement).hide(); Все получилось, спасибо Вам огромное!:dance: :thanks: |
Для <tr> не 'block', а 'table-row' в display прописывается, не?
|
Cuntmann,
При show/hide я знала, но забыла (девичья память - она такая), а вот про 'table-row' впервые слышу!:blink: Работает просто замечательно! Спасибо Вам за помощь и за новую информацию! |
Manyasha,
рад стараться, мэм )) вот вам ссылочка на хороший ресурс |
| Часовой пояс GMT +3, время: 20:45. |