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中，我挂钩了这样的所有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会更少。

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

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/>块视为一个整体“旅行”：

$("[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( ... );
    }
);

Answer 2

首先，我不会因为VS抱怨无效课而得到太多的胃灼热。对于所有VS都知道，他们来自CDN。另外，在没有使用的附加课程中没有任何伤害。

就简洁而言，你可以使用<td>命令并删除类属性，但是如果没有代码更改，你将失去重新排序/重新排序的能力（也许你想重新组织列顺序）。我也不会非常依赖于找到父<tr>，而是倾向于另一个类（如.item），所以它最多为.item，然后是.to， from等。如果您愿意，这可以让您自由地转移到<ul>或<div>。

另一种选择是使用data-*属性，但是，对我而言，如果信息已经存在并且您只是重新设置皮肤，那么这是另一层膨胀。除非该模型将使用AJAX并且您只是存储data-id，否则没有必要。

Answer 3

你正在按照它现在要做的方式去做，这正是如何使用类的。忽略来自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>

在数据表中正确使用类vs ID

3 个答案: