3

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

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

我将此表单放入 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中，我像这样挂钩所有href：

// 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，然后进入每个 CLASS 以查找 TD 内的数据。然后我可以根据需要在表单上使用这些数据。有两个问题：VS2012 抱怨所有这些类都是未定义的（当然它们不在 CSS 上）。另一个问题是，对于每一行，我都有这个标记的重复。我希望它更干净。我知道如果我使用 jQuery，我可以依赖 TR 中的 TD 顺序。代码变得更脆弱，但 HTML 更少。

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

4

3 回答 3

2

退一步考虑一下你的结构，就它所持有的数据而言，这可能会有所帮助。

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

我通常解决这个问题的方法是将标识符在层次结构中尽可能地提高。在这种情况下，我会使用某种识别方案来识别行（我通常会制作自己的自定义参数，但如果您愿意，可以使用 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/>块视为一个整体“Trip”：

$("[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( ... );
    }
);
于 2013-04-02T01:00:10.087 回答
2

首先，我不会因为 VS 抱怨无效课程而感到心痛。就 VS 所知，它们来自 CDN。此外，不使用额外的课程也没有什么坏处。

就简洁而言，您可以使用<td>order 并删除类属性，但是您将失去稍后在不更改代码的情况下重新设置样式/重新排序它们的能力（也许您想重新组织列顺序）。我也不会太依赖于找到 parent <tr>，而是倾向于另一个类（比如.item），所以它最多可以.item到.to,from等。如果你愿意的话，这让你以后可以自由地移动到 a<ul>或<div>s像。

另一种选择是使用data-*属性，但是，对我来说，这是另一层膨胀，如果信息已经存在并且您只是重新设计它，那么这不是必需的。除非模型要使用 AJAX 并且您只是存储 a data-id，否则没有必要。

于 2013-04-02T01:03:21.320 回答
1

您正在按照现在的方式进行操作，这正是类的使用方式。忽略来自 VS 的警告，它不太擅长验证 HTML，尤其是在有趣地使用 ASP.NET 模板时。

在我看来，这种在每个上指定类的方法<td>远远优于依赖 jQuery 中的顺序，<td>因为你的 jQuery 变得更加健壮。

你tripId可以在你的<tr>身上，因为这样你的其他人更容易获得它<td>。例如，您还可以选择相关数据$('#trip-10 .weight')。

<ItemTemplate>
  <tr id="trip-<%# DataBinder.Eval(Container.DataItem, "TripId")%>">
    <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>
于 2013-04-02T01:02:42.223 回答