我的第一个“Datalist1”从数据库中检索一些值，即
巴士路线编号、车辆编号、行程日期、巴士源站名称、巴士目的地名称
另一个位于 datalist1 内的“嵌套数据列表”根据源和目标之间的阶段数显示阶段的总线图标。我成功地正确检索了数据并使用上面检索到的详细信息显示了一个弹出窗口。
<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" CellSpacing="3" RepeatLayout="Table" BackColor="LightGray" OnItemDataBound="DataList1_DataBinding">
<ItemTemplate>
<table class="table">
<tr style="background-color : #b62a26; font-size:medium ; font-family:Verdana; height:40px ">
<td style="padding-left:5px">
<asp:Label ID="lblTrip" runat="server" Text="TripID:" ForeColor="White"></asp:Label>
</td>
<td style="width:900px; ">
<b> <asp:Label ID="lblTripID" runat="server" Text='<%# Eval("TripID") %>' ForeColor="White"></asp:Label></b></td>
</td>
</tr>
<tr style="background-color: white; font-size:small ; font-family:Verdana; height:60px; ">
<td colspan="2">
<b>RouteID: </b></b>
<asp:Label ID="lblRouteID" runat="server" Text='<%# Eval("RouteID") %>'></asp:Label>
<b>Vehicle NO: </b>
<asp:Label ID="lblVehicleNo" runat="server" Text='<%# Eval("VehicleNo") %>'></asp:Label>
<b>TripDate: </b>
<asp:Label ID="lblTripDate" runat="server" Text='<%# Eval("TripDate") %>'></asp:Label>
<b>From: </b>
<asp:Label ID="lblFromStage" runat="server" Text='<%# Eval("FromStage") %>'></asp:Label>
<b>To: </b>
<asp:Label ID="lblToStage" runat="server" Text='<%# Eval("ToStage") %>'></asp:Label>
</td>
</tr>
<tr style="background-color: white; font-size:small ; font-family:Verdana; height:10px ">
<td style="width:10px"></td>
<td>
<div id="activeBus" style="line-height: 0px; float: left; margin: 0px; padding: 0px; display: inline-block; vertical-align: top;">
<asp:DataList ID="innerDataList1" runat="server" RepeatColumns="10" CellSpacing="3" BackColor="white">
<ItemTemplate>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="center">
<table>
<tr style=" align-items:center ">
<td>
<asp:ImageButton ID="imgactiveBtn" runat="server" src="\images\ActiveRed.png" Width="15px" Height="15px" OnClick="imgBtn_Click" ToolTip="Track Details" />
<%-- <asp:ImageButton ID="ImageButton1" src="\images\ActiveRed.png" runat="server" Style="cursor: pointer" Width="15px" Height="15px" OnClientClick="return LoadDiv(this.src);"/> --%>
</td>
</tr>
<tr>
<td>
<b><asp:Label ID="lblStageName" runat="server" Text='<%# Eval("StageName") %>' Font-Size="XX-Small" Font-Names="Verdana" ></asp:Label></b>
</td>
</tr>
</table>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
</div>
<div id="inactiveBus" style="line-height: 0px; float: left; margin: 0px; padding: 0px; display: inline-block; vertical-align: top;">
<asp:DataList ID="innerDataList" runat="server" RepeatColumns="10" CellSpacing="3" BackColor="white" OnItemDataBound="innerDataList_ItemDataBound">
<ItemTemplate>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="center">
<table>
<tr style=" align-items:center ">
<td>
<asp:ImageButton ID="imginactiveBtn" runat="server" src="\images\InActive.png" Width="15px" Height="15px" OnClick="imgBtn_Click" ToolTip="Not Reached yet!" />
</td>
</tr>
<tr>
<td>
<b><asp:Label ID="lblStageName" runat="server" Text='<%# Eval("StageName") %>' Font-Size="XX-Small" ForeColor="#CCCCFF"></asp:Label></b>
</td>
</tr>
</table>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<div id="dialog" style="display: none">
<br />
<b>RouteID:</b> <span id="RouteID1"></span> <label id="lblEmpId"></label>
<br />
<b>TripDate:</b> <span id="TripDate1"></span> <label id="lblEmpName"></label>
<br />
<b>Stage Name:</b> <span id="StageName1"></span><label id="lblEmpLocation"></label>
<br />
<b>Scheduled Arrival:</b> <span id="Scheduled_Time1"></span>
<br />
<b>Reached On:</b> <span id="Arrival_Time1"></span>
<br /><br />
</div>
jQuery代码是：
$(document).on("click", "[id*=imginactiveBtn]", function () {
$("#RouteID1").html($(".RouteID", $(this).closest("tr")).html());
$("#TripDate1").html($(".TripDate", $(this).closest("tr")).html());
$("#StageName1").html($(".StageName", $(this).closest("tr")).html());
$("#Scheduled_Time1").html($(".Scheduled_Time", $(this).closest("tr")).html());
$("#Arrival_Time1").html($(".Arrival_Time", $(this).closest("tr")).html());
// Get the Current Row and its values.
var currentRow = $(this).parents("tr");
var RId = currentRow.find("span[id*='lblRouteID']").text();
var TDate = currentRow.find("span[id*='lblTripDate']").text();
var SName = currentRow.find("span[id*='lblStageName']").text();
// Populate labels inside the dailog.
$("#lblEmpId").text(RId);
$("#lblEmpName").text(TDate);
$("#lblEmpLocation").text(SName);
$("#dialog").dialog({
title: "Track Vehicle at <em>" + SName + "</em>",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
例如，让我们假设在 2017 年 12 月 10 日，RouteID 为 1 和 2 的 2 个行程处于活动状态，每个 Routes 有 3 个阶段。
单击路线 1 的第一阶段时，弹出窗口应显示：
Route ID: Route1
TripDate: 12/10/2017
Stage Name: Stage1
单击第二个图标时，应显示弹出窗口
RouteID: Route1
TripDate: 12/10/2017
Stage: Stage2 and so on...
同样，当单击 Route2 的阶段时
Route ID: Route2
TripDate: 12/10/2017
Stage Name: Stage1
当他点击 Route 2 的第二阶段时
Route ID: Route2
TripDate: 12/10/2017
Stage Name: Stage2 and so on.....
但弹出显示：
RouteID: Route1Route2
TripDate: 12/10/201712/10/2017
StageName: Stage1Stage2Stage3Stage1Stage2Stage3
Route1 的所有 3 个阶段和 Route2 的所有 3 个阶段。
我该如何解决这个问题。我在哪里做错了？