时间戳

首页 > 解决方案 > 在表格单元格之间循环，读取不同的数据

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

问题描述

这是我的 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());
    });
});

标签： javascriptjqueryhtmlhtml-table

解决方案

您需要在其中进行过滤，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>

推荐阅读