Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   При изменении видимости tr слетают параметры ее содержимого (https://javascript.ru/forum/events/61823-pri-izmenenii-vidimosti-tr-sletayut-parametry-ee-soderzhimogo.html)

Manyasha 10.03.2016 15:05

При изменении видимости 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 = "скрыть">

destus 10.03.2016 17:39

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 10.03.2016 18:28

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

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

Cuntmann 10.03.2016 18:39

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

Manyasha 10.03.2016 18:46

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

Cuntmann 10.03.2016 19:43

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


Часовой пояс GMT +3, время: 07:59.