javascript - 在带有数据的表中正确使用类与 ID

Question

请记住，我是客户端脚本的新手，正在学习我的方法......

我需要创建一个包含表格数据的页面，并让用户能够点击特定链接以显示模式弹出窗口并提交请求。

我将此表单放入 DIV 并使用 jQuery 显示它，没问题。对于“表格”，我对如何以最佳方式连接点击和数据感到两难。我倾向于用类来做，但我的 HTML 看起来是这样的:

<ItemTemplate>
  <tr>
    <td class="tripId"><%# DataBinder.Eval(Container.DataItem, "TripId")%></td>
    <td class="pickupDate"><%# DataBinder.Eval(Container.DataItem, "PickupDate", "{0:MM/dd/yy}")%></td>
    <td class="from"><%# DataBinder.Eval(Container.DataItem, "FromCity")%>, <%# DataBinder.Eval(Container.DataItem, "FromState")%></td>
    <td class="deliveryDate"><%# DataBinder.Eval(Container.DataItem, "DeliveryDate", "{0:MM/dd/yy}")%></td>
    <td class="to"><%# DataBinder.Eval(Container.DataItem, "ToCity")%>, <%# DataBinder.Eval(Container.DataItem, "ToState")%></td>
    <td class="weight"><%# DataBinder.Eval(Container.DataItem, "Weight")%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "LoadedMiles")%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "RequiredEquipment")%></td>
    <td><a href="#" class="inquireLink"><strong>Inquire now</strong></a></td>
  </tr>
</ItemTemplate>

在 javascript 中，我像这样 Hook 所有 hrefs:

// Hookup link events to handle modal popup
$(".inquireLink").on("click", function (event) {
    event.preventDefault();
    inquireAboutTrip($(this));
});

function inquireAboutTrip($link) {
   // Link located on <TR> so we can traverse up and then into each cell to get data
}

因此，我可以从链接遍历到 TR，然后遍历每个类以在 TD 中查找数据。然后我可以根据需要在表单上使用这些数据。有两个问题:VS2012 提示所有这些类都未定义(当然它们不在 CSS 上)。另一个问题是，对于每一行，我都有这种重复标记。我希望它更干净。我知道如果我使用 jQuery，我可以依赖 TR 中 TD 的顺序。代码变得更脆弱，但不会像 HTML 那样。

解决此类问题的常用方法是什么？

Answer 1

这可能有助于退后一步，根据它所持有的数据稍微考虑一下您的结构。

这里是表格中的一行，该行中有一堆单元格。其中一行引用了某个“Trip”实体的 ID。但实际上，该行中的所有字段都指的是同一个“行程”。

我通常解决这个问题的方法是将标识符放在层次结构中尽可能高的位置。在这种情况下，我会使用某种识别方案来识别行(我通常会制作自己的自定义参数，但如果您愿意，也可以使用 ID):

<tr tripId="<%# DataBinder.Eval(Container.DataItem, "TripId")%>">
    <td class="tripId"><%# DataBinder.Eval(Container.DataItem, "TripId")%></td>
    <td><a href="#" class="inquireLink"><strong>Inquire now</strong></a></td>
</tr>

现在，我们可以开始处理 <tr/> block 作为一个整体“旅行”:

$("[tripId]").each(
    function(indx, elem) {
        $(elem).find(".inquireLink").click( ... );
        // Or better yet, if there is only ever a single anchor tag in the "Inquire" cell:
        $(elem).find("a").click( ... );
    }
);