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

Question

有了新冠肺炎，我们从商店开始了送货计划。为了进行旅游，我们从数据库中获取页面上的信息。但为了进行最快的浏览，我们需要将每一行都复制到一个新页面上，这是一项艰巨的工作。我们需要创建的列表如下：

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的GoogleChrome控制台创建这个列表。我的问题是如何从javascript中的特定数据绑定项中获取值。

示例：如何获取"；阿纳姆"；其中数据绑定＝"0"；text：城市；。

<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>