Selecting the value of a element in a html table using jquery
My table is :
<script type="text/javascript">
$(".icon_add").live("click", function(e) {
e.preventDefault();
var $link = $(this);
var docid = $($(this).parent().children("input[type=hidden][id=DocId]")[0]).val();
var doctitle = $($(this).parent().children("input[type=hidden][id=DocTitle]")[0]).val(); // For getting the value of 'DocTitle' - undifined
alert(doctitle);
var grpid = $('#BldGrpId').val();
var contents = '<li><span class="remove_item"><a href="#"> </a>' + doctitle + '</li>';
$("#LstBldDoc").append(contents);
$("#LstDocTemp tr[id='" + docid + "']").remove();
$.post("/BuildGroup/EditDocTempForBldGrp", { docId: docid, bldGrpId: grpid });
});
</script>
<table id="LstDocTemp" class="grid_view" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th class="selct_column" align="left">
</th>
<th class="selct_column" align="left">
<input name="checkbox6" id="chkSelectAll" type="checkbox" />
</th>
<th class="doc_title_1" align="left">
Document title
</th>
<th class="description" align="left">
Description
</th>
<th class="revision" align="center">
Revision
</th>
<th class="part_开发者_StackOverflow社区no" align="left">
Parts name
</th>
<th class="issue_no" align="center">
Issue
</th>
<th class="actions" align="center">
Actions
</th>
</tr>
<% int slNo = 1; %>
<%foreach (var item in Model)
{ %>
<tr id="<%= Html.Encode(item.DocId) %>">
<td>
<%--<%= slNo %>--%>
</td>
<td>
<input type="checkbox" name="chkItem" class="chk" id="chkbox_<%=Html.Encode(item.DocId) %>" />
</td>
<td>
<%= Html.Hidden("DocTitle", item.DocTitle)%>
<a href='<%= Url.Action("DetailsDocumentTemplate", "Document", new { id = item.DocId })%>'>
<%=Html.Encode(item.DocTitle) %></a>
</td>
<td align="left">
<%--<%= Html.Hidden("DocDesc", item.DocDesc)%>--%>
<%= Html.Encode(item.DocDesc) %>
</td>
<td align="center" class="dark_highlight">
<%--<%= Html.Hidden("DocRevision", item.DocRevision)%>--%>
<%= Html.Encode(item.DocRevision) %>
</td>
<td align="left">
<%= Html.Hidden("PartListId", item.PartListId)%>
<%--<%= Html.Hidden("PartNo", item.PartNo)%>--%>
<%= Html.Encode(item.PartNo) %>
</td>
<td align="center" class="light_highlight">
<%--<%= Html.Hidden("IssueNo", item.IssueNo)%>--%>
<%=Html.Encode(item.IssueNo) %>
</td>
<td align="center">
<%= Html.Hidden("DocId", item.DocId)%>
<a class="icon_add" title="Add">Add</a>
</td>
</tr>
<%slNo++;
} %>
</tbody>
</table>
Here the alert(doctitle); is poping "undefined". I need to get value of DocTitle (hidden field) when "addSelected" is clicked.
Please can anyone help me out of this??
You cannot use the same ID multiple times - but apparently you are doing that since you are using a static id in a loop. Doing so basically breaks everything - you cannot expect selectors to work properly with duplicate IDs.
After fixing this, the following code should work to get the value of the hidden field:
$link.closest('tr').find('input:hidden[name=DocTitle]').val();
Explanation: First climb up the DOM tree starting at $link until the current element is <tr>
. Then search for hidden input fields with the given name and get its value.
精彩评论