我在div标签内创建Dynamic表。在每个单元格内部添加标签和图像按钮。单元格添加到行和行到表格。我想知道如何使用jquery在5 * 8表中找到哪个imagebuton。动态表代码添加在asp.net
中public void DisplaySeatLayout()
{
//fetching data from database
_seatBUS = new SeatBUS();
DataTable dt = _seatBUS.GetAllSeatByBusRouter(_listBus);
//Layout generation code
ImageButton img ;
HtmlTable table = new HtmlTable();
table.Attributes.Add("runat", "server");
table.Attributes.Add("id", "LayoutTable");
HtmlTableRow [] tr = new HtmlTableRow[] { new HtmlTableRow(), new HtmlTableRow(), new HtmlTableRow(),new HtmlTableRow(),new HtmlTableRow()};
HtmlTableCell tc = null;
int SeatNo=0;
//Getting Total no of seats.
int MaxSeatNo = dt.Rows.Count;
//Iterating datatable
//Displaying labels for displaying column names in the table
for (int columnCounter = 0; columnCounter < 8; columnCounter++){
for (int rowCounter = 0; rowCounter < 5; rowCounter++){
if (SeatNo < MaxSeatNo){
if (rowCounter == 2 && columnCounter < 7){
//adding label in each cell.
tc = new HtmlTableCell();
Label lbl = new Label();
lbl.Text = "";
lbl.ID = "lbl " + rowCounter.ToString() + columnCounter.ToString();
tc.Controls.Add(lbl);
tr[rowCounter].Controls.Add(tc);
}
else{
//adding label in each cell.
tc = new HtmlTableCell();
Label lbl = new Label();
lbl.Text = dt.Rows[SeatNo]["NumberSeat"].ToString();
lbl.ID = "lbl " + rowCounter.ToString() + columnCounter.ToString();
lbl.Attributes.Add("runat", "server");
tc.Controls.Add(lbl);
//adding imagebutton in each cell .
img = new ImageButton();
img.Attributes.Add("runat", "server");
img.Attributes.Add("type", "image");
img.Attributes.Add("id", dt.Rows[SeatNo]["NumberSeat"].ToString());
img.CssClass = "seatRightMostRow1";
img.ImageUrl = "../Images/available_seat_img.png";
img.ID = dt.Rows[SeatNo]["NumberSeat"].ToString();
img.Click += new ImageClickEventHandler(Imagebutton_Click);
tc.Controls.Add(img);
tr[rowCounter].Controls.Add(tc);
SeatNo++;
}
}//SeatNo < MaxSeatNo
table.Controls.Add(tr[rowCounter]);
}
seatArranngement.Controls.Add(table);
}
}
HTML页面中的DOM内容。
<div id="ctl00_ContentPlaceHolder1_seatArranngement">
<table runat="server" id="LayoutTable">
<tr>
<td><span id="ctl00_ContentPlaceHolder1_lbl 00" runat="server">1</span><input type="image" name="ctl00$ContentPlaceHolder1$1" id="ctl00_ContentPlaceHolder1_1" class="seatRightMostRow1" runat="server" type="image" id="1" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$1", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 01" runat="server">5</span><input type="image" name="ctl00$ContentPlaceHolder1$5" id="ctl00_ContentPlaceHolder1_5" class="seatRightMostRow1" runat="server" type="image" id="5" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$5", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 02" runat="server">9</span><input type="image" name="ctl00$ContentPlaceHolder1$9" id="ctl00_ContentPlaceHolder1_9" class="seatRightMostRow1" runat="server" type="image" id="9" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$9", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 03" runat="server">13</span><input type="image" name="ctl00$ContentPlaceHolder1$13" id="ctl00_ContentPlaceHolder1_13" class="seatRightMostRow1" runat="server" type="image" id="13" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$13", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 04" runat="server">17</span><input type="image" name="ctl00$ContentPlaceHolder1$17" id="ctl00_ContentPlaceHolder1_17" class="seatRightMostRow1" runat="server" type="image" id="17" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$17", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 05" runat="server">21</span><input type="image" name="ctl00$ContentPlaceHolder1$21" id="ctl00_ContentPlaceHolder1_21" class="seatRightMostRow1" runat="server" type="image" id="21" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$21", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 06" runat="server">25</span><input type="image" name="ctl00$ContentPlaceHolder1$25" id="ctl00_ContentPlaceHolder1_25" class="seatRightMostRow1" runat="server" type="image" id="25" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$25", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 07" runat="server">29</span><input type="image" name="ctl00$ContentPlaceHolder1$29" id="ctl00_ContentPlaceHolder1_29" class="seatRightMostRow1" runat="server" type="image" id="29" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$29", "", true, "", "", false, false))" style="border-width:0px;" /></td>
</tr>
<tr>
<td><span id="ctl00_ContentPlaceHolder1_lbl 10" runat="server">2</span><input type="image" name="ctl00$ContentPlaceHolder1$2" id="ctl00_ContentPlaceHolder1_2" class="seatRightMostRow1" runat="server" type="image" id="2" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$2", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 11" runat="server">6</span><input type="image" name="ctl00$ContentPlaceHolder1$6" id="ctl00_ContentPlaceHolder1_6" class="seatRightMostRow1" runat="server" type="image" id="6" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$6", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 12" runat="server">10</span><input type="image" name="ctl00$ContentPlaceHolder1$10" id="ctl00_ContentPlaceHolder1_10" class="seatRightMostRow1" runat="server" type="image" id="10" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$10", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 13" runat="server">14</span><input type="image" name="ctl00$ContentPlaceHolder1$14" id="ctl00_ContentPlaceHolder1_14" class="seatRightMostRow1" runat="server" type="image" id="14" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$14", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 14" runat="server">18</span><input type="image" name="ctl00$ContentPlaceHolder1$18" id="ctl00_ContentPlaceHolder1_18" class="seatRightMostRow1" runat="server" type="image" id="18" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$18", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 15" runat="server">22</span><input type="image" name="ctl00$ContentPlaceHolder1$22" id="ctl00_ContentPlaceHolder1_22" class="seatRightMostRow1" runat="server" type="image" id="22" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$22", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 16" runat="server">26</span><input type="image" name="ctl00$ContentPlaceHolder1$26" id="ctl00_ContentPlaceHolder1_26" class="seatRightMostRow1" runat="server" type="image" id="26" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$26", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 17" runat="server">30</span><input type="image" name="ctl00$ContentPlaceHolder1$30" id="ctl00_ContentPlaceHolder1_30" class="seatRightMostRow1" runat="server" type="image" id="30" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$30", "", true, "", "", false, false))" style="border-width:0px;" /></td>
</tr>
<tr>
<td><span id="ctl00_ContentPlaceHolder1_lbl 20"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 21"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 22"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 23"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 24"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 25"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 26"></span></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 27" runat="server">31</span><input type="image" name="ctl00$ContentPlaceHolder1$31" id="ctl00_ContentPlaceHolder1_31" class="seatRightMostRow1" runat="server" type="image" id="31" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$31", "", true, "", "", false, false))" style="border-width:0px;" /></td>
</tr>
<tr>
<td><span id="ctl00_ContentPlaceHolder1_lbl 30" runat="server">3</span><input type="image" name="ctl00$ContentPlaceHolder1$3" id="ctl00_ContentPlaceHolder1_3" class="seatRightMostRow1" runat="server" type="image" id="3" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$3", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 31" runat="server">7</span><input type="image" name="ctl00$ContentPlaceHolder1$7" id="ctl00_ContentPlaceHolder1_7" class="seatRightMostRow1" runat="server" type="image" id="7" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$7", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 32" runat="server">11</span><input type="image" name="ctl00$ContentPlaceHolder1$11" id="ctl00_ContentPlaceHolder1_11" class="seatRightMostRow1" runat="server" type="image" id="11" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$11", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 33" runat="server">15</span><input type="image" name="ctl00$ContentPlaceHolder1$15" id="ctl00_ContentPlaceHolder1_15" class="seatRightMostRow1" runat="server" type="image" id="15" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$15", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 34" runat="server">19</span><input type="image" name="ctl00$ContentPlaceHolder1$19" id="ctl00_ContentPlaceHolder1_19" class="seatRightMostRow1" runat="server" type="image" id="19" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$19", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 35" runat="server">23</span><input type="image" name="ctl00$ContentPlaceHolder1$23" id="ctl00_ContentPlaceHolder1_23" class="seatRightMostRow1" runat="server" type="image" id="23" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$23", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 36" runat="server">27</span><input type="image" name="ctl00$ContentPlaceHolder1$27" id="ctl00_ContentPlaceHolder1_27" class="seatRightMostRow1" runat="server" type="image" id="27" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$27", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 37" runat="server">32</span><input type="image" name="ctl00$ContentPlaceHolder1$32" id="ctl00_ContentPlaceHolder1_32" class="seatRightMostRow1" runat="server" type="image" id="32" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$32", "", true, "", "", false, false))" style="border-width:0px;" /></td>
</tr>
<tr>
<td><span id="ctl00_ContentPlaceHolder1_lbl 40" runat="server">4</span><input type="image" name="ctl00$ContentPlaceHolder1$4" id="ctl00_ContentPlaceHolder1_4" class="seatRightMostRow1" runat="server" type="image" id="4" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$4", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 41" runat="server">8</span><input type="image" name="ctl00$ContentPlaceHolder1$8" id="ctl00_ContentPlaceHolder1_8" class="seatRightMostRow1" runat="server" type="image" id="8" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$8", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 42" runat="server">12</span><input type="image" name="ctl00$ContentPlaceHolder1$12" id="ctl00_ContentPlaceHolder1_12" class="seatRightMostRow1" runat="server" type="image" id="12" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$12", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 43" runat="server">16</span><input type="image" name="ctl00$ContentPlaceHolder1$16" id="ctl00_ContentPlaceHolder1_16" class="seatRightMostRow1" runat="server" type="image" id="16" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$16", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 44" runat="server">20</span><input type="image" name="ctl00$ContentPlaceHolder1$20" id="ctl00_ContentPlaceHolder1_20" class="seatRightMostRow1" runat="server" type="image" id="20" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$20", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 45" runat="server">24</span><input type="image" name="ctl00$ContentPlaceHolder1$24" id="ctl00_ContentPlaceHolder1_24" class="seatRightMostRow1" runat="server" type="image" id="24" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$24", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 46" runat="server">28</span><input type="image" name="ctl00$ContentPlaceHolder1$28" id="ctl00_ContentPlaceHolder1_28" class="seatRightMostRow1" runat="server" type="image" id="28" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$28", "", true, "", "", false, false))" style="border-width:0px;" /></td>
<td><span id="ctl00_ContentPlaceHolder1_lbl 47" runat="server">33</span><input type="image" name="ctl00$ContentPlaceHolder1$33" id="ctl00_ContentPlaceHolder1_33" class="seatRightMostRow1" runat="server" type="image" id="33" src="../Images/available_seat_img.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$33", "", true, "", "", false, false))" style="border-width:0px;" /></td>
</tr>
答案 0 :(得分：2)
您可以附加到表格中的所有按钮：
$("#<%= LayoutTable.ClientID %>").find("input[type='image']").click(function(e) {
//Do something here
});