table列表操作问题

Question

在实现列表时，通过编辑，查看，删除对每个元素进行操作。

table内容如下

<table id="table" class="table" style="margin-top: 20px;">
            <tr>
                <td>文件名</td>
                <td>文件路径</td>
                <td>分类</td>
                <td>大小</td>
                <td>操作</td>
            </tr>
            <#list resources as resource>
                <tr class="trnode" name="${resource.name}">
                    <td id="res_id" style="display: none">${resource.resource_id}</td>
                    <td id="name">${resource.name}</td>
                    <td>${resource.location}</td>
                    <td>${resource.creator}</td>
                    <td>${resource.size}</td>
                    <td>
                        <a href="#" class="edit" data-toggle="modal" data-target="#editModal">编辑</a>&nbsp;
                        <a href="#" class="detail" data-toggle="modal" data-target="#showModal">查看</a>&nbsp;
                        <a href="#" class="del" data-toggle="modal" data-target="#deleteModal">删除</a>
                    </td>
                </tr>
            </#list>
        </table>

脚本如下

<script>
    $(document).ready(function(){
        $('.del').click(function(){
            alert("2222");
        })
        $('.edit').click(function(){
            alert($('.trnode').attr('name'));
        })
        $('.detail').click(function(){
            alert($('#res_id').text());
        })
    });
</script>

问题是，为什么点击后显示的都是第一个元素的内容，
点击第二行元素的编辑，依然显示第一行的内容

Answer 1

你把 $('.trnode') $('#res_id') 打出来就知道为什么了
用 $(this).parents(".trnode").attr("name")

Answer 2

你要使用this