Форум

rodiony4 · #1 (**permalink**) 19.09.2016, 15:57

Здравствуйте
Есть таблица, в первом столбце есть текст с наименованием, во второй столбец динамически добавляется/удаляется текст.
Изначально строки таблицы скрыты.
Как сделать - показывать только те строки, в которых есть содержимое ячеек второго столбца. И не показывать строки, если ячейки второго столбцы пустые.
Можно конечно каждой строке сделать отдельный класс и по условию показывать/скрывать, но строк в таблице много и соответственно будет столько же условий

<style type="text/css">
.hid {display:none;}
</style>
<input type="button" value="добавить/удалить текст" onclick="send()">
<br>
<table border="1" cellspacing="0" cellpadding="0">
<tr class="hid">
 <td>Марка</td>
 <td id="marka_decode" class="decode"></td>
</tr>
<tr class="hid">
 <td>Модель</td>
 <td id="typeGlass_decode" class="decode"></td>
</tr>
<tr class="hid">
 <td>Цвет</td>
 <td id="colorGlass_decode" class="decode"></td>
</tr>
</table>

<script type='text/javascript'>
function send(){
	if($('#marka_decode').html() == ''){
		$('#marka_decode').text('текст');
		} else {
		$('#marka_decode').text('');	
	}
	
    if($('.decode').html() !== ''){//второе условие
        $('.hid').show()
        } else {
        $('.hid').hide()    
    }
}
</script>

рони · #2 (**permalink**) 19.09.2016, 16:15

rodiony4,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $(".btn").on("click", function() {
  $(".hid").filter(function() {
  return $(".decode",this).text()
}).show()
})
});
  </script>
</head>

<body>
<style type="text/css">
.hid {display:none;}
</style>
<input type="button" value="добавить/удалить текст"  class="btn">
<br>
<table border="1" cellspacing="0" cellpadding="0">
<tr class="hid">
 <td>Марка</td>
 <td id="marka_decode" class="decode"></td>
</tr>
<tr class="hid">
 <td>Модель</td>
 <td id="typeGlass_decode" class="decode">test</td>
</tr>
<tr class="hid">
 <td>Цвет</td>
 <td id="colorGlass_decode" class="decode"></td>
</tr>
</table>


</body>
</html>

rodiony4 · #3 (**permalink**) 19.09.2016, 16:58

рони, да, теперь строка показывается, а если динамически удалить текст из ячейки второго столбца, то как эту строку опять скрыть?

<script type='text/javascript'>
function send(){
	if($('#marka_decode').html() == ''){
		$('#marka_decode').text('текст');
		} else {
		$('#marka_decode').text('');	
	}

$(".hid").filter(function() {
  return $(".decode",this).text()
}).show()

}
</script>

рони · #4 (**permalink**) 19.09.2016, 17:12

rodiony4,
а подумать?
$(".hid").hide().filter

rodiony4 · #5 (**permalink**) 19.09.2016, 17:33

рони, большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript