Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрыть строку таблицы исходя из текста и значения используя JS (https://javascript.ru/forum/dom-window/81283-skryt-stroku-tablicy-iskhodya-iz-teksta-i-znacheniya-ispolzuya-js.html)

novigformus 03.11.2020 15:52
Скрыть строку таблицы исходя из текста и значения используя JS
 
Есть большая таблица с инпутами. Нужно при нахождении в соответствующей строке текста "Сортировка в разделе" и отсутствия значения в инпуте - скрыть данную строку. А если в инпуте есть значение, то она должна отображаться.


Пример HTML кода
<table>
		<tr class="bx-in-group" id="tr_PROPERTY_523">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Климатические комплексы [976]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tb4c9fda7c3514b7b7f76cda8870d3e274"><tbody><tr><td><input name="PROP[523][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_524">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Аромалампы [1972]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tbb55807774637cf8adceb9dbe6e6c62cd"><tbody><tr><td><input name="PROP[524][n0]" value="2" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_525">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Прочее [1156]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tbff90da9577bea62c1c1e48a9577b5ae7"><tbody><tr><td><input name="PROP[525][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_526">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Ортопедическая обувь [1977]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tbcc955d1caa1c3d6f8d5004fb20bfbadf"><tbody><tr><td><input name="PROP[526][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_527">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Обогреватели [974]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tb49953deef72bc73283e6528bf7ef5215"><tbody><tr><td><input name="PROP[527][n0]" value="20" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_528">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Мезороллеры [1392]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tb4bea3a4d6322723484f379a5d572b034"><tbody><tr><td><input name="PROP[528][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
</table>


Есть код на JS, но почему-то если подряд идут несколько строк с пустым инпутом, то скрываются инпуты через один, что не так с кодом?

const tdDesc = document.querySelectorAll('.desc');
const tdInps = document.querySelectorAll('td input');
const reg = /Сортировка в разделе/gi;

[...tdDesc].forEach((e, i) => {
  if(tdInps[i].value.length === 0 && reg.test(e.textContent)) {
    e.parentElement.style.display = 'none';
  }
});

рони 03.11.2020 16:09
novigformus,
на выбор, в строке 5 обнулить индекс reg или создать reg;

novigformus 03.11.2020 16:48
Цитата:
Сообщение от рони (Сообщение 530346)
novigformus,
на выбор, в строке 5 обнулить индекс reg или создать reg;
Попробовал обнулить индекс, но что-то не срабатывает. Подскажите как правильно сделать.

рони 03.11.2020 17:03
novigformus,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .bx-in-group.hide{
       display: none;
  }

  </style>
</head>

<body>
<table>
		<tr class="bx-in-group" id="tr_PROPERTY_523">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Климатические комплексы [976]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tb4c9fda7c3514b7b7f76cda8870d3e274"><tbody><tr><td><input name="PROP[523][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_524">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Аромалампы [1972]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tbb55807774637cf8adceb9dbe6e6c62cd"><tbody><tr><td><input name="PROP[524][n0]" value="2" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_525">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Прочее [1156]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tbff90da9577bea62c1c1e48a9577b5ae7"><tbody><tr><td><input name="PROP[525][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_526">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Ортопедическая обувь [1977]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tbcc955d1caa1c3d6f8d5004fb20bfbadf"><tbody><tr><td><input name="PROP[526][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_527">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Обогреватели [974]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tb49953deef72bc73283e6528bf7ef5215"><tbody><tr><td><input name="PROP[527][n0]" value="20" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
		<tr class="bx-in-group" id="tr_PROPERTY_528">
			<td class="adm-detail-valign-top adm-detail-content-cell-l desc" width="40%">Сортировка в разделе "Мезороллеры [1392]":</td>
			<td width="60%" class="adm-detail-content-cell-r"><table cellpadding="0" cellspacing="0" border="0" class="nopadding" width="100%" id="tb4bea3a4d6322723484f379a5d572b034"><tbody><tr><td><input name="PROP[528][n0]" value="" size="30" type="text"><br></td></tr></tbody></table></td>
		</tr>
</table>
<script>
const reg = /Сортировка в разделе/gi;
const group = document.querySelectorAll('.bx-in-group');
group.forEach((parent, i) => {
const tdDesc = parent.querySelector('.desc');
const tdInps = parent.querySelector('input');
    reg.lastIndex  = 0;
    if(!tdInps.value.trim() && reg.test(tdDesc.textContent)) {
        parent.classList.add('hide');
    }
});

</script>
</body>
</html>


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