Форум

novigformus · #1 (**permalink**) 03.11.2020, 15:52

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

Пример 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';
  }
});

рони · #2 (**permalink**) 03.11.2020, 16:09

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

novigformus · #3 (**permalink**) 03.11.2020, 16:48

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

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

Попробовал обнулить индекс, но что-то не срабатывает. Подскажите как правильно сделать.

рони · #4 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript