单击按钮时显示最近的td值

Question

我有一个从数据库动态生成的GridView。 每行的开头都有一个按钮。 单击按钮（myBtn）时，应在每行的右侧显示列的文本值（其中class为ObjectID）。

所有代码：

<asp:GridView ID="gvmyObject" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" CssClass="GridView" >

        <AlternatingRowStyle BackColor="White" />
        <Columns>
               <asp:TemplateField>
                <ItemTemplate>
                <button class="myBtn" type="button" data-toggle="modal" data-target="#myModal" style="vertical-align:middle"><span>Select</span></button>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="ObjectID" >
                <ItemTemplate>
                    <asp:Label ID="ObjectID" runat="server" class="ObjectID" Width="118px" Height="26px"  style="text-align:center" Font-Names="Georgia" margin-Left="100px" Text='<%# Bind("ObjectID") %>'></asp:Label>


                </ItemTemplate>
            </asp:TemplateField>
             <asp:TemplateField HeaderText="ObjectName">
                <ItemTemplate>

                    <asp:Label ID="ObjectName" runat="server" Width="118px" Height="26px" style="text-align:center" Font-Names="Georgia" margin-Left="100px" Text='<%# Bind("ObjectName") %>'></asp:Label>

                </ItemTemplate>
            </asp:TemplateField>
              <asp:TemplateField HeaderText="OtherID">
                <ItemTemplate>

                    <asp:Label ID="OtherID" runat="server" Width="118px" Height="26px" style="text-align:center" Font-Names="Georgia" margin-Left="100px" Text='<%# Bind("OtherID") %>'></asp:Label>

                </ItemTemplate>
            </asp:TemplateField>
               <asp:TemplateField HeaderText="SmallID">
                <ItemTemplate>

                    <asp:Label ID="SmallID" runat="server" Width="118px" Height="26px" style="text-align:center" Font-Names="Georgia" margin-Left="100px" Text='<%# Bind("SmallID") %>'></asp:Label>

                </ItemTemplate>
            </asp:TemplateField>
        </Columns>



    </asp:GridView>


   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Request modification</h4>
                    </div>
                    <div class="modal-body">

                           Modal data
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" onClick="refreshPage()" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

我有一些代码，但是它不起作用。我尝试了一切：/

   $(document).on('click', ".myBtn", function () {
            console.log($(this).closest('td').find('.ObjectID').text());

 });

这是jsfiddle代码：

https://jsfiddle.net/1v0tm84f/7/

基本上，单击按钮时，第一行应显示316，第二行应显示240。

谢谢！

Answer 1

您应该指向包含整个行（TR）的元素，以便像示例一样从该行中检索数据。

$(document).on('click', ".myBtn", function () {
            console.log($(this).closest('tr').find('.ObjectID').text());
           
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="GridView" cellspacing="0" cellpadding="4" id="MainContent_gvObjekat" style="color:#333333;border-collapse:collapse;">
		<tr style="color:White;background-color:#507CD1;font-weight:bold;">
			<th scope="col">&nbsp;</th><th scope="col">ObjectID</th><th scope="col">ObjectName</th><th scope="col">OtherID</th><th scope="col">SmallID</th>
		</tr><tr style="background-color:#EFF3FB;">
			<td>
                    <button class="myBtn" type="button" data-toggle="modal" data-target="#myModal" style="vertical-align:middle"><span>Select</span></button>
                    </td><td>
                        <span id="MainContent_gvObject_ObjectID_0" class="ObjectID" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">316</span>
                         

                    </td><td>

                        <span id="MainContent_gvObject_ObjectName_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">MYTEST1</span>

                    </td><td>

                        <span id="MainContent_gvObject_OtherID_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">2</span>

                    </td><td>

                        <span id="MainContent_gvObject_SmallID_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">229</span>

                    </td>
		</tr><tr style="background-color:White;">
			<td>
                    <button class="myBtn" type="button" data-toggle="modal" data-target="#myModal" style="vertical-align:middle"><span>Select</span></button>
                    </td><td>
                        <span id="MainContent_gvObjekat_ObjekatID_1" class="ObjectID" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">240</span>
                         

                    </td><td>

                        <span id="MainContent_gvObjekat_ObjekatName_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">MYTEST3</span>

                    </td><td>

                        <span id="MainContent_gvObjekat_BusinessCenterID_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">1</span>

                    </td><td>

                        <span id="MainContent_gvObjekat_ParentObjekatID_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">229</span>

                    </td>
		</tr>
	</table>

Answer 2

您可以尝试

js

$(document).click(function() {
            console.log($(this).closest('tr').find('.ObjectID').text());

 });

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="GridView" cellspacing="0" cellpadding="4" id="MainContent_gvObjekat" style="color:#333333;border-collapse:collapse;">
        <tr style="color:White;background-color:#507CD1;font-weight:bold;">
            <th scope="col">&nbsp;</th><th scope="col">ObjectID</th><th scope="col">ObjectName</th><th scope="col">OtherID</th><th scope="col">SmallID</th>
        </tr><tr style="background-color:#EFF3FB;">
            <td>
                    <button class="myBtn" type="button" data-toggle="modal" data-target="#myModal" style="vertical-align:middle"><span>Select</span></button>
                    </td><td>
                        <span id="MainContent_gvObject_ObjectID_0" class="ObjectID" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">316</span>


                    </td><td>

                        <span id="MainContent_gvObject_ObjectName_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">MYTEST1</span>

                    </td><td>

                        <span id="MainContent_gvObject_OtherID_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">2</span>

                    </td><td>

                        <span id="MainContent_gvObject_SmallID_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">229</span>

                    </td>
        </tr><tr style="background-color:White;">
            <td>
                    <button class="myBtn" type="button" data-toggle="modal" data-target="#myModal" style="vertical-align:middle"><span>Select</span></button>
                    </td><td>
                        <span id="MainContent_gvObjekat_ObjekatID_1" class="ObjectID" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">240</span>


                    </td><td>

                        <span id="MainContent_gvObjekat_ObjekatName_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">MYTEST3</span>

                    </td><td>

                        <span id="MainContent_gvObjekat_BusinessCenterID_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">1</span>

                    </td><td>

                        <span id="MainContent_gvObjekat_ParentObjekatID_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:26px;width:118px;text-align:center">229</span>

                    </td>
        </tr>
    </table>