При изменении видимости 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, время: 07:59. |