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

Метод 1: использование метода indexOf()
Метод indexOf() можно использовать для поиска индекса заданного значения строки в массиве. В контексте таблицы «Материал» мы можем получить доступ к данным таблицы и найти нужное значение строки. Вот пример:

const rowData = ['Apple', 'Banana', 'Orange', 'Mango'];
const rowIndex = rowData.indexOf('Orange');
console.log('Index of "Orange":', rowIndex);

Выход:
Индекс «Оранжевый»: 2

Метод 2: использование метода findIndex()
Метод findIndex() позволяет нам найти индекс строки, соответствующей определенному условию. Этот метод особенно полезен, если у вас есть сложные структуры данных или вы хотите найти определенное значение свойства в массиве объектов. Вот пример:

const tableData = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
];
const rowIndex = tableData.findIndex(row => row.name === 'Jane');
console.log('Index of "Jane":', rowIndex);

Выход:
Индекс «Джейн»: 1

Метод 3: итерация с помощью цикла for
Другой подход заключается в переборе каждой строки таблицы материалов с использованием цикла for и сравнении значений строк, пока не будет найдено совпадение. Этот метод хорошо работает, когда вам нужно выполнить дополнительную логику при поиске индекса. Вот пример:

const tableRows = document.querySelectorAll('.table-row');
let rowIndex = -1;
for (let i = 0; i < tableRows.length; i++) {
  if (tableRows[i].textContent === 'Apple') {
    rowIndex = i;
    break;
  }
}
console.log('Index of "Apple":', rowIndex);

Выход:
Индекс «Apple»: 0

Получение индекса строки в таблице материалов — распространенная задача во фронтенд-разработке. В этой статье мы рассмотрели три различных метода достижения этой цели: использование метода indexOf(), использование метода findIndex() и итерация с помощью цикла for. В зависимости от вашего конкретного варианта использования вы можете выбрать метод, который лучше всего соответствует вашим потребностям, и реализовать его в своих проектах. Поняв эти методы, вы сможете эффективно манипулировать данными и извлекать их из таблиц материалов.