Показать не пустые строки таблицы
Здравствуйте
Есть таблица, в первом столбце есть текст с наименованием, во второй столбец динамически добавляется/удаляется текст. Изначально строки таблицы скрыты. Как сделать - показывать только те строки, в которых есть содержимое ячеек второго столбца. И не показывать строки, если ячейки второго столбцы пустые. Можно конечно каждой строке сделать отдельный класс и по условию показывать/скрывать, но строк в таблице много и соответственно будет столько же условий <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> |
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> |
рони, да, теперь строка показывается, а если динамически удалить текст из ячейки второго столбца, то как эту строку опять скрыть?
<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> |
rodiony4,
а подумать? $(".hid").hide().filter |
рони, большое спасибо!
|
Часовой пояс GMT +3, время: 08:13. |