如何根据同一行上的单元格点击查找表格单元格值？

I have an onclick event of a cell in my table, I would then like to be able to get the value of the cell which has a certain class name on it.

我在表格中有一个单元格的onclick事件，然后我希望能够获得具有某个类名的单元格的值。

HTML:

HTML：

<div class="table-responsive ManagementTableScroll">
    <table class="table table-bordered RoleTable" id="CreateEditRoleTable">
        <thead>
            <tr>
                <th>Permission Name</th>
                <th>Permission Type</th>
                <th>Permission Value</th>
                <th id="EditPermissionTableHead" style="display: table-cell;">Edit Permission</th>
                <th>Remove</th>
            </tr>
        </thead>
        <tbody id="PendingPermissionsTableBody">
            <tr>
                <td class="TdCenter EditPermissionName">Export Amount</td>
                <td class="TdCenter EditPermissionType">Whole number</td>
                <td class="TdCenter EditPermissionValue">5</td>
                <td class="TdCenter">
                    <a class="glyphicon glyphicon-pencil TdCenter" id="EditPermission" href="#">EditPermission</a>
                </td>
                <td class="TdCenter">
                    <a class="glyphicon glyphicon-remove TdCenter" id="RemoveRow" href="#"> RemoveRow </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Jquery:

jQuery的：

$(document).on("click", "#EditPermission", function () {
    $('#CreateOptionDD').val("Previous");
    $('#CreateOptionDD').trigger('change');
    $(this).find('.EditPermissionName').val();
});

I would have thought that this $(this).find(classname) would have found the value. But it returns undefined.

我原以为这个$（this）.find（classname）会找到这个值。但它返回undefined。

2 个解决方案

#1

you need to find the table above (up the HTML tree) before filtering back down the tree. So change

在过滤掉树之前，您需要找到上面的表（在HTML树上）。所以改变

$(this).find('.EditPermissionName').text();

至

$(this).closest('tr').find('.EditPermissionName').text();

$(this).closest('tr') should return the <tr> element. you then need to find the .EditPermissionName under this (<td class="TdCenter EditPermissionName">)

$（this）.closest（'tr'）应该返回元素。然后你需要在这个下找到.EditPermissionName（）

#2

-2

It is better to add an identifier on every row so it will be easy for you to get and update any data within that row.

最好在每一行添加一个标识符，这样您就可以轻松获取和更新该行中的任何数据。

<div class="table-responsive ManagementTableScroll">
<table class="table table-bordered RoleTable" id="CreateEditRoleTable">
    <thead>
        <tr>
            <th>Permission Name</th>
            <th>Permission Type</th>
            <th>Permission Value</th>
            <th id="EditPermissionTableHead" style="display: table-cell;">Edit Permission</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody id="PendingPermissionsTableBody">
        <tr id="unique-id-1"> 
            <input type="hidden" id="EditPermissionValue" value="5">
            <td class="TdCenter EditPermissionName">Export Amount</td>
            <td class="TdCenter EditPermissionType">Whole number</td> 
            <td class="TdCenter">5</td> 
            <td class="TdCenter"><a class="glyphicon glyphicon-pencil TdCenter" id="EditPermission" href="#"></a></td> 
            <td class="TdCenter"><a class="glyphicon glyphicon-remove TdCenter" id="RemoveRow" href="#"></a></td> 
        </tr>
        <tr id="unique-id-2"> 
            <input type="hidden" id="EditPermissionValue" value="5">
            <td class="TdCenter EditPermissionName">Export Amount</td>
            <td class="TdCenter EditPermissionType">Whole number</td> 
            <td class="TdCenter">5</td> 
            <td class="TdCenter"><a class="glyphicon glyphicon-pencil TdCenter" id="EditPermission" href="#"></a></td> 
            <td class="TdCenter"><a class="glyphicon glyphicon-remove TdCenter" id="RemoveRow" href="#"></a></td> 
        </tr>
    </tbody>
</table>

You can create a hidden input and set the EditPermissionValue value in there and you can get the value via jquery like this.

你可以创建一个隐藏的输入并在那里设置EditPermissionValue值，你可以像这样通过jquery获取值。

 $(document).on("click", "#EditPermission", function () {
     var $row = $(this).closest("tr");

    $permission_value = $row.find('#EditPermissionValue').val();

    $('#CreateOptionDD').trigger('change');
});

#1