this code runs fine for single row <tr> </tr>, but when i use multiple table rows as given below javascript alert box shows null value ,, how can i correct my script for it ??
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$("[id*=LinkButton1]").live("click", function () {
var item = $("[id*=lblItem]", $(this).closest("tr")).html();
var price = $("[id*=lblPrice]", $(this).closest("tr")).html();
alert("Item: " + item + " Price: " + price);
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<table border = "1">
<tr>
<td><asp:Label ID="lblItem" runat="server" Text='<%# Eval("Item") %>'></asp:Label></td></tr><tr>
<td><asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price") %>'></asp:Label></td></tr>
<td><asp:LinkButton ID="LinkButton1" runat="server" Text="Select"></asp:LinkButton></td><tr>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
------------------------------------------------------
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 199);
dt.Rows.Add("Football", 20);
dt.Rows.Add("Shirt", 22.5);
DataList1.DataSource = dt;
DataList1.DataBind();
}