列出通过数据绑定搜索的 td 值中的特定数据

Question

对于 COVID，我们从我们的商店启动了一项送货计划。为了进行游览，我们从数据库中获取页面上的信息。但是为了实现最快的浏览，我们需要复制新页面上的每一行，这需要大量的工作。我们需要创建的列表如下所示：

Streetname 1 CITY {ORDERNUMBER}
Streetname 2 CITY {ORDERNUMBER}
Streetname 3 CITY {ORDERNUMBER}

我们通过复制每一行来做到这一点。这需要做很多工作，而我们可以自己生成列表。网页 HTML 如下所示：

            <table class="table table-framed">
                        <tbody data-bind="foreach: selectedTourNonDeletedShipments" id="sortable" class="ui-sortable" >
                            <tr>
                                <td id="orderNumber" style="width: 11%"><a data-dismiss="modal" href="ShipmentDetail" data-bind="text: orderNo, click: $root.onShipmentDetail.bind($data)">1151491332</a></td>
                                <td style="width: 9%" data-bind="text: zipcode">1234AB</td>
                                <td style="width: 13%" data-bind="text: city">Arnhem</td>
                                <td style="width: 17%" data-bind="text: deliveryAddress">Streetname 123</td>
                                <td style="width: 12%" data-bind="text: timeSlot">2020-12-27 09:00</td>
                                <td style="width: 8%" data-bind="text: weight">0.77</td>
                                <td style="width: 8%" data-bind="text: volume">0.01</td>
                                <td style="width: 5%"><button id="bRemoveTour" class="btn btn-secondary btn-sm" data-bind="click: function() { $root.clickRemoveSingleShipment($data) }">X</button></td>
                            </tr>
            <tr>
                <td>Same things again</td>
            </tr>
                        </tbody>
                    </table>

我的想法是使用带有 Javascript/jQuery 的 Google Chrome 控制台创建此列表。我的问题是如何从 javascript 中的特定数据绑定项中获取值。

示例：如何在 data-bind = "text: City" 处获取值 "Arnhem"。

<td style="width: 13%" data-bind="text: city">Arnhem</td>

我希望有人可以帮助我。非常感谢。

Answer 1

您可以使用选择器，例如：'[data-bind="text: city"]' 或使用行内单元格的索引

简单示例：

$('tbody#sortable tr').each(function(){
   const $cells = $(this).children()
   const order = $cells.eq(0).text(),
         city = $cells.filter('[data-bind="text: city"]').text()
         
  console.log('Order:', order, ' City:',city )      

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-framed">
  <tbody data-bind="foreach: selectedTourNonDeletedShipments" id="sortable" class="ui-sortable">
    <tr>
      <td id="orderNumber" style="width: 11%"><a data-dismiss="modal" href="ShipmentDetail" data-bind="text: orderNo, click: $root.onShipmentDetail.bind($data)">1151491332</a></td>
      <td style="width: 9%" data-bind="text: zipcode">1234AB</td>
      <td style="width: 13%" data-bind="text: city">Arnhem</td>
      <td style="width: 17%" data-bind="text: deliveryAddress">Streetname 123</td>
      <td style="width: 12%" data-bind="text: timeSlot">2020-12-27 09:00</td>
      <td style="width: 8%" data-bind="text: weight">0.77</td>
      <td style="width: 8%" data-bind="text: volume">0.01</td>
      <td style="width: 5%"><button id="bRemoveTour" class="btn btn-secondary btn-sm" data-bind="click: function() { $root.clickRemoveSingleShipment($data) }">X</button></td>
    </tr>
    
  </tbody>
</table>