При изменении видимости tr слетают параметры ее содержимого

[Manyasha]

Всем, здравствуйте!

Для строк таблицы меняю видимость (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 = "скрыть">

[destus]

Manyasha,

Подскажите, пожалуйста, почему так происходит

this это textarea, this.parentElement это td, this.parentElement.parentElement это tr.

и как это можно исправить?

<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="скрыть">

[Manyasha]

destus,

this.parentElement.parentElement это tr

Так я и хочу скрыть/показать строки.
Извините, что привела некорректный пример!
В некоторых случаях требуется скрыть не все строки, а только те, для которых выполняется какое-то условие. Похожий код применяется в нескольких местах скрипта, везде разные условия, поэтому скрывать всю таблицу мне нельзя.

вот пример скрытия строк с условием (если нет текста - скрываем)

<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();

Все получилось, спасибо Вам огромное!

[Cuntmann]

Для <tr> не 'block', а 'table-row' в display прописывается, не?

[Manyasha]

Cuntmann,
При show/hide я знала, но забыла (девичья память - она такая),
а вот про 'table-row' впервые слышу!
Работает просто замечательно!
Спасибо Вам за помощь и за новую информацию!

[Cuntmann]

Manyasha,
рад стараться, мэм )) вот вам ссылочка на хороший ресурс