Показать только те строки таблицы, ячейки которых не пустые

[sashgera]

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

<style type="text/css">
  .hid {display:none;}
</style>
<input type="button" value="Вставить текст" id="send">
<table class="hid" id="tab_decode" border="1" cellspacing="0" cellpadding="0">
  <tr class="hid">
    <td>наименование 1</td>
    <td id="d1" class="decode"></td>
  </tr>
  <tr class="hid">
    <td>наименование 2</td>
    <td id="d2" class="decode"></td>
  </tr>
  <tr class="hid">
    <td>наименование 3</td>
    <td id="d3" class="decode"></td>
  </tr>
  <tr class="hid">
    <td>наименование 4</td>
    <td id="d4" class="decode"></td>
  </tr>
</table>

<script type="text/javascript">
$('#send').click(function(){
	$('#d1, #d3, #d4').text('текст');

	// показать только те строки, в которых ячейки .decode не пустые
	// В Мозилле задержка, примерно около секунды,  перед показом таблицы!!
	$('.hid, #tab_decode').hide().filter(function(){
		return $('.decode',this).text()
	}).show();
});
</script>

[Fenex]

Раз у вас много строк и вылезает производительность, то советую переписать на нативном JS.

[sashgera]

Fenex, но проблема с производительностью почему-то только в Мозилле, в других браузерах все нормально, включая IE

[predefined]

Возможно у вас получается неоптимальная выборка элементов, которая гоняется много раз в циклах.

Уберите у самой таблицы класс class="hid"(она и так не будет показываться при скрытых ячейках) и попробуйте этот код:

<script type="text/javascript">
$('#send').click(function(){
	$('#d1, #d3, #d4').text('текст');

	$('td.decode:not(td:empty)').parent().toggleClass('hid');
});
</script>

Поставьте .removeClass('hid') тк .toggleClass('hid') будет переключать туда-сюда при клике на кнопку

Вообще при работе со строками таблиц их лучше обрамлять в <tbody></tbody> и скрывать/открывать их - работает значительно быстрее, особенно если у вас группы строк.

[sashgera]

predefined, вот новый пример с двумя кнопками для вставки текста
Строки, в которых ячейки .decode пустые, должны быть всегда скрыты
По клику первой кнопки - текст вставляется в 1 и 4 строку, 2 и 3 строки будут скрыты
По клику второй кнопки – весь текст из ячеек .decode удаляется и вставляется новый текст во 2 и 3 строки, но здесь возникает проблема – 1 и 4 строки не скрываются.
Вот пример

<style type="text/css">
  .hid {display:none;}
</style>
<input type="button" value="Вставить текст в 1 и 4 строки" id="texl">
<input type="button" value="Вставить текст в 2 и 3 строки" id="tex2">
<table id="tab_decode" border="1" cellspacing="0" cellpadding="0">
  <tr class="hid">
    <td>наименование 1</td>
    <td id="d1" class="decode"></td>
  </tr>
  <tr class="hid">
    <td>наименование 2</td>
    <td id="d2" class="decode"></td>
  </tr>
  <tr class="hid">
    <td>наименование 3</td>
    <td id="d3" class="decode"></td>
  </tr>
  <tr class="hid">
    <td>наименование 4</td>
    <td id="d4" class="decode"></td>
  </tr>
</table>

<script type="text/javascript">
$('#texl').click(function(){
	del();
	$('#d1, #d4').text('текст в 1 и 4 стр');
	send();
});	
$('#tex2').click(function(){
	del();
	$('#d2, #d3').text('текст в 2 и 3 стр');
	send();
});	
function del(){
	$('.decode').empty(); // удаление содержимого ячеек .decode		
};
function send(){
	// показать только те строки, в которых ячейки .decode не пустые
	$('td.decode:not(td:empty)').parent().removeClass('hid');
};
</script>

[sashgera]

predefined, немного изменив скрытие/показ таблицы, все стало OK
Раньше было – при загрузке страницы сама таблица (table) и строки (tr) были скрыты (наверное поэтому таблица открывалась с задержкой).
Теперь сделал так - при загрузке страницы скрыта только таблица.
код в примере обновил

[predefined]

Сообщение от sashgera

По клику второй кнопки – весь текст из ячеек .decode удаляется и вставляется новый текст во 2 и 3 строки, но здесь возникает проблема – 1 и 4 строки не скрываются.

Конечно, им же класс hid никто назад не восстанавливает. Из условия задачи это было не очевидно и я упустил.
Если всё работает - отлично. Если будет тормозить - вот самый быстрый вариант прохода по ячейкам таблицы:

function send(){
	// показать только те строки, в которых ячейки .decode не пустые
	$('.decode').each( function(i, dom_elem) {	// По всем <td class='decode'>
	  var elem = $(dom_elem);					// DOM-элемент -> объект jQuery
	  if (elem.text() =='')  elem.parent().addClass('hid');
	  else elem.parent().removeClass('hid');
	  });
};

А если у ваших <tr class="hid"> не будет других классов кроме hid, то можно внутри цикла на нативном яваскрипте сделать проверку. Теоретически, должно ускорить работу с таблицей:

function send(){
	// показать только те строки, в которых ячейки .decode не пустые
	$('.decode').each( function(i, dom_elem) {	// По всем <td class='decode'>
	  dom_elem.parentElement.className = dom_elem.innerHTML ==''  ?'hid' :'';
	  });
};

[sashgera]

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