Как найти все идентификаторы из массива атрибутов data-id в jquery?

Question

У меня есть список таблиц, в котором есть строка с именем и значением. Всякий раз, когда я щелкаю по одному из них, я могу получить идентификатор этого элемента, по которому щелкнули, но мне также нужны другие идентификаторы этой таблицы. Это таблица выбора опций, если я выберу какое-то ключевое слово из выпадающего списка, он вернет список имени и значения этой связанной опции. Тем не менее, я нашел все имя и значение этого списка, но не могу найти их идентификаторы, я могу только извлечь идентификатор элемента, по которому щелкнули. Вот как я их нахожу:

HTML код:

<tbody class="dataTable" id="dataTable">`
   for (var i = 0; i < response.length; i++) {
       html += `<tr id="packageTypeRow${i}">
     <td class="tname">${response[i].name}</td>
     <td class="tvalue">${response[i].value}</td>
     <button class="edit-button" data-id="${response[i].id}"><i class="fas fa-edit"></i></button>
}

data-id="${response[i].id} это все идентификаторы.

Я дал только те части кода, которые я считаю необходимыми. и форма

<form:input path="id" id="list_id" type="hidden" class="list_id"/>
<form:input path="type" id="type" type="hidden" class="list_type"/>
<!-- below will have input for name and value !-->

И мой jquery такой:

var name = getting the input value;
var value =  input value;
var id = $(this).data('id') /// it return's the exact id which I've clicked

var allValue =  $(document).find('table td.tvalue').map(function() {
            return this.innerText;
        }).get(); // this return all the value from the table
var allName =  $(document).find('table td.tname').map(function() {
            return this.innerText;
        }).get();

Но все, что я хочу, это allvalue и allname не должны возвращать значение щелкнул Я бы. Предположим, что моя таблица имеет следующие значения:

**name value id**
Apple AP    123
Orange OR   500
Banana BA   127

. Теперь, если я нажму оранжевый, то allValue или allName должны вернуть только [Apple, Banana] и [AP, BA]. Но вместо этого он возвращает все, включая [Orange, OR]. Но я не хочу этого, поскольку это нарушает некоторые условия. Вот почему я хочу изменить код $(document).find('table td.tname'), добавив оранжевый идентификатор, чтобы он возвращал только два других элемента с использованием идентификатора оранжевого, и я также не могу отфильтровать orange value, как если бы таблица имела дублированное имя или значение.

Я пытался сделать это следующими способами: $(document).find('table td.tname :not(id)'), но я думаю, что это не правильный путь. Или я хочу идентификатор яблока: data-id: 123, банан data-id:127, всякий раз, когда я нажимаю оранжевую кнопку элемента. Любые предложения будут полезны.

Answer 1

Для этого вы можете выбрать элементы .tvalue и .tname, относящиеся к нажатой .edit-button, и использовать not(), чтобы исключить их из объекта jQuery, который вы используете для map() массивов:

$('.edit-button').on('click', function() {
  let $btn = $(this);
  let $row = $btn.closest('tr');
  let $name = $row.find('.tname');
  let $value = $row.find('.tvalue');
  let id = $btn.data('id');

  let allValues = $(document).find('table td.tvalue').not($value).map((i, el) => el.innerText).get();
  let allNames = $(document).find('table td.tname').not($name).map((i, el) => el.innerText).get();

  console.log(allValues);
  console.log(allNames);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="dataTable" id="dataTable">
    <tr>
      <td class="tname">Apple</td>
      <td class="tvalue">AP</td>
      <td><button class="edit-button" data-id="123"><i class="fas fa-edit">Edit</i></button></td>
    </tr>
    <tr>
      <td class="tname">Orange</td>
      <td class="tvalue">OR</td>
      <td><button class="edit-button" data-id="500"><i class="fas fa-edit">Edit</i></button></td>
    </tr>
    <tr>
      <td class="tname">BAnana</td>
      <td class="tvalue">BA</td>
      <td><button class="edit-button" data-id="127"><i class="fas fa-edit">Edit</i></button></td>
    </tr>
  </tbody>
</table>

В качестве альтернативы, если таблица не динамическая c, вы можете построить массивы один раз при загрузке страницы и отфильтровать результат при каждом нажатии кнопки:

let allValues = $(document).find('table td.tvalue').map((i, el) => el.innerText).get();
let allNames = $(document).find('table td.tname').map((i, el) => el.innerText).get();

$('.edit-button').on('click', function() {
  let $btn = $(this);
  let $row = $btn.closest('tr');
  let name = $row.find('.tname').text();
  let value = $row.find('.tvalue').text();
  let id = $btn.data('id');

  let filteredValues = allValues.filter(v => v !== value);
  let filteredNames = allNames.filter(v => v !== name);
  
  console.log(filteredValues);
  console.log(filteredNames);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="dataTable" id="dataTable">
    <tr>
      <td class="tname">Apple</td>
      <td class="tvalue">AP</td>
      <td><button class="edit-button" data-id="123"><i class="fas fa-edit">Edit</i></button></td>
    </tr>
    <tr>
      <td class="tname">Orange</td>
      <td class="tvalue">OR</td>
      <td><button class="edit-button" data-id="500"><i class="fas fa-edit">Edit</i></button></td>
    </tr>
    <tr>
      <td class="tname">BAnana</td>
      <td class="tvalue">BA</td>
      <td><button class="edit-button" data-id="127"><i class="fas fa-edit">Edit</i></button></td>
    </tr>
  </tbody>
</table>

Я бы также предложил использовать $('#dataTable') вместо $(document), чтобы сделать селекторы td более производительными и точными.