Javascript 在包含数据的表中正确使用类vs ID

请记住，我对客户端脚本还不熟悉，从中学习

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

我将这个表单放到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
}

所以，我可以从link遍历到TR，然后遍历到每个类中，以查找TD中的数据。然后我可以根据需要在表单上使用这些数据。有两个问题：VS2012抱怨所有这些类都未定义，当然它们不在CSS上。另一个问题是，对于每一行，我都有这个标记的重复。。我想要更干净的。 我知道，若我使用jQuery，我可以依赖TR中TDs的顺序。代码变得更脆弱，但HTML更少

---

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

退一步考虑一下您的结构，考虑一下它所包含的数据，可能会有所帮助

这里是表中的一行，行中有一堆单元格。其中一行表示某个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>

---

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

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

你的tripId可能会出现在你的头上，因为这样你的其他s会更容易获得。您还可以使用$'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抱怨无效的类而感到太多的心痛。据VS所知，它们来自CDN。另外，不使用额外的类也没有什么害处

为了简洁起见，您可以使用order并删除类属性，但是您以后将失去在不更改代码的情况下对它们重新设置样式/重新排序的能力—也许您想重新组织列顺序。我也不会太依赖于找到父类，而是倾向于另一个类，比如.item，所以它是up to.item，然后down to.to，from，等等。如果你愿意，这会让你以后可以自由地移动到or

---

另一种选择是使用data-*属性，但是，对我来说，这是另一层膨胀，如果信息已经存在并且正在呈现，而您只是重新对其进行蒙皮，那么这是不必要的。除非模型将使用AJAX，而您只是存储一个数据id，否则这是不必要的。

感谢您的输入，我将不得不在其他页面上使用AJAX，这将非常有用谢谢！它给了我一些想法。我选择Thomas的答案，因为它给了我关于如何使用jQuery的另一个教训/技巧

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