Блог

Главная - Вопросы по программированию - Скрыть элементы, не зная полного идентификатора

Скрыть элементы, не зная полного идентификатора

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть таблица, подобная приведенной ниже

 <table id="categoriesTable">

 <tr id=row_id1_dynamicdata> 
    <td>...</td>
    <td>..</td>
 </tr>

<tr id=row_id2_dynamicdata> 
    <td>...</td>
    <td>..</td>
</tr>

<tr id=row_id3_dynamicdata> 
    <td>...</td>
    <td>..</td>
</tr>

<tr id=row_id4_dynamicdata> 
    <td>...</td>
    <td>..</td>
</tr>

</table>

Я хочу скрыть все строки, кроме строки, идентификатор которой содержит id4. У меня не будет полного идентификатора.
Я придумал приведенный ниже код jQuery, но поскольку у меня нет полного идентификатора, он не работает.

 var idValue = document.getElementById(someElement);
$('#categoreisTable').find('tr').not($('#row_'  idValue)).hide();

Как фильтровать только с половиной идентификатора?

Комментарии:

1. Что такое half id?

2. Итак, каким будет идентификатор предварительного исправления или половина ввода-вывода?

3. пример id=row_catergory1_subCategory1 . Я знаю значение до row_category1 . Ник предложил использовать атрибут, начинающийся с . Я тестирую это

Ответ №1:

Вы можете использовать селектор «Атрибут начинается с», чтобы найти строки, которые не совпадают с указанными idValue . Например:

 $('#someElement').on('change', function() {
  var idValue = this.value;
  $('#categoriesTable')
    .find('tr')
    .show()    // not needed if you only want to hide
    .not('[id^="row_id'   idValue   '_"]')
    .hide();
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="categoriesTable">

  <tr id=row_id1_dynamicdata>
    <td>.1..</td>
    <td>..</td>
  </tr>


  <tr id=row_id2_dynamicdata>
    <td>.2..</td>
    <td>..</td>
  </tr>

  <tr id=row_id3_dynamicdata>
    <td>.3..</td>
    <td>..</td>
  </tr>

  <tr id=row_id4_dynamicdata>
    <td>.4..</td>
    <td>..</td>
  </tr>

</table>

<input type="text" id="someElement" />

Ответ №2:

Вы можете использовать querySelectorAll для tr элемента, а затем запустить цикл, чтобы показывать только строки, которые включают id4 в свой идентификатор.

Запустите фрагмент ниже:

 var idValue = document.querySelectorAll('tr');

for (i = 0; i < idValue.length; i  ) {
  if (idValue[i].id.includes("id4")) {
      idValue[i].style.display = "block";
    } else {
      idValue[i].style.display = "none"
    }
  } 
 <table id="categoriesTable">

  <tr id=row_id1_dynamicdata>
    <td>row1</td>
    <td>..</td>
  </tr>


  <tr id=row_id2_dynamicdata>
    <td>row2</td>
    <td>..</td>
  </tr>

  <tr id=row_id3_dynamicdata>
    <td>row3</td>
    <td>..</td>
  </tr>

  <tr id=row_id4_dynamicdata>
    <td>row 4</td>
    <td>..</td>
  </tr>
  
    <tr id=anotherrow_id4_dynamicdata>
    <td>another row with  id4</td>
    <td>..</td>
  </tr>

</table>

Ответ №3:

Вы можете использовать document.getElementsByTagName, чтобы получить все идентификаторы, содержащие id4.

Затем, просто чтобы скрыть их.

 let ElementArray = Array.prototype.filter.call(document.getElementsByTagName('tr'), element => element.id.match('id4'));
let idArray = ElementArray.forEach(element => document.getElementById(element.id).style.display="none");

Ответ №4:

Вы можете просто использовать:

 $('#categoriesTable tr').not('[id^="row_id4_"]').hide();