通过数据绑定从 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>

我的想法是使用 Google Chrome 控制台和 Javascript/jQuery 创建此列表。我的问题是如何从 javascript.

中的特定数据绑定项获取值

示例：如何获取值“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>

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

List specific data from td value searching by data-bind

html

javascript

data-binding

jquery

return-value