Цикл между ячейками таблицы, чтение разных данных

Question

Вот моя HTML таблица:

<table id="tableSensors" class="table table-sm header-fixed">
    <thead class="thead-light">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Min</th>
            <th scope="col" width="10%">Max</th>
            <th scope="col" width="10%">Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>

        <tr>
            <td>Temperature</td>
            <td>0</td>
            <td>100</td>
            <td>
                <input class="form-control form-control-sm" type="text" value="21" readonly="">
            </td>
        </tr>
        <tr>
            <td>Humidity</td>
            <td>0</td>
            <td>100</td>
            <td>
                <input class="form-control form-control-sm" type="text" value="65" readonly="">
            </td>
        </tr>
        <tr>
            <td>Pressure</td>
            <td>980</td>
            <td>1040</td>
            <td>
                <input class="form-control form-control-sm" type="text" value="1015" readonly="">
            </td>
        </tr>
    </tbody>
</table>

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

Я хочу:

1. цикл среди всех строк / столбцов
2. пропуск первого строка
3. помещает данные в массив, учитывая разницу в последнем столбце

Фактический код:

function exportTable(id) { // id = #tableSensors
    let data = [];
    $(id).find('tr').not(':first').each(function() {
        $(this).find('td').each(function() {
            data.push($(this).text().trim());
        });
    });

    // do something else
}

Но:

1. он не пропускает первую строку
2. Я не уверен, как узнать, находится ли я в последнем столбце, чтобы использовать .val() для тега input

В идеале я должен проверить в каждой ячейке, есть ли тег input для правильного извлечения данных.

ОБНОВЛЕНИЕ

Вторая точка, исправленная мной самостоятельно:

$(id).find('tr').not(':first').each(function() {
    $(this).find('td').each(function() {
        if ($(this).find('input').length) data.push($(this).find('input').val().trim());
        else data.push($(this).text().trim());
    });
});

Answer 1

Вам необходимо отфильтровать в tbody, иначе он будет игнорировать tr в thead, поскольку :first селектор псевдокласса выбирает первый из всей коллекции.

function exportTable(id) { // id = #tableSensors
  let data = [];
  $(id).find('tbody tr').not(':first').each(function() {
    $(this).find('td').each(function() {
      data.push($(this).text().trim());
    });
  });

  console.log(data);
  // do something else
}

function exportTable(id) { // id = #tableSensors
  let data = [];
  $('table tbody').find('tr').not(':first').each(function() {
    $(this).find('td').each(function() {
      data.push($(this).text().trim());
    });
  });

  console.log(data);
  // do something else
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
  <thead class="thead-light">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Min</th>
      <th scope="col" width="10%">Max</th>
      <th scope="col" width="10%">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>

    <tr>
      <td>Temperature</td>
      <td>0</td>
      <td>100</td>
      <td>
        <input class="form-control form-control-sm" type="text" value="21" readonly="">
      </td>
    </tr>
    <tr>
      <td>Humidity</td>
      <td>0</td>
      <td>100</td>
      <td>
        <input class="form-control form-control-sm" type="text" value="65" readonly="">
      </td>
    </tr>
    <tr>
      <td>Pressure</td>
      <td>980</td>
      <td>1040</td>
      <td>
        <input class="form-control form-control-sm" type="text" value="1015" readonly="">
      </td>
    </tr>
  </tbody>
</table>


<span onClick="exportTable();">click</span>

---

Вы также можете использовать [:first-child][2], который будет работать в обоих направлениях, поскольку он игнорирует оба элемента tr.

function exportTable(id) { // id = #tableSensors
  let data = [];
  $(id).find('tbody tr:not(:first-child)').each(function() {
    $(this).find('td').each(function() {
      data.push($(this).text().trim());
    });
  });

}

function exportTable(id) { // id = #tableSensors
  let data = [];
  $('table tbody tr:not(:first-child)').each(function() {
    $(this).find('td').each(function() {
      data.push($(this).text().trim());
    });
  });


  console.log(data);
  // do something else
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableSensors" class="table table-sm header-fixed">
  <thead class="thead-light">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Min</th>
      <th scope="col" width="10%">Max</th>
      <th scope="col" width="10%">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>

    <tr>
      <td>Temperature</td>
      <td>0</td>
      <td>100</td>
      <td>
        <input class="form-control form-control-sm" type="text" value="21" readonly="">
      </td>
    </tr>
    <tr>
      <td>Humidity</td>
      <td>0</td>
      <td>100</td>
      <td>
        <input class="form-control form-control-sm" type="text" value="65" readonly="">
      </td>
    </tr>
    <tr>
      <td>Pressure</td>
      <td>980</td>
      <td>1040</td>
      <td>
        <input class="form-control form-control-sm" type="text" value="1015" readonly="">
      </td>
    </tr>
  </tbody>
</table>


<span onClick="exportTable();">click</span>