在表格单元格之间循环，读取不同的数据答案

【问题标题】：Cycle among table cells, reading different data在表格单元格之间循环，读取不同的数据
【发布时间】：2020-02-08 15:52:46
【问题描述】：

这是我的 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 标签，而不是纯文本。

我想：

在所有行/列之间循环
跳过第一行
将数据推入数组，注意最后一列的区别

这是实际代码：

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
}

但是：

它不会跳过第一行
我不知道如何知道我是否在最后一列中以在 input 标签上使用 .val()

理想情况下，如果有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());
    });
});

【问题讨论】：

标签： javascript jquery html html-table

【解决方案1】：

您需要在tbody 中进行过滤，否则它将忽略thead 中的tr，因为:first pseudo class selector 会选择整个集合中的第一个。

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>

【讨论】：

哦，是的。很简单。