【基础中心】笔记六--选中动态表格的一行

最新推荐文章于 2025-01-13 19:03:03 发布

原创最新推荐文章于 2025-01-13 19:03:03 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

工作笔记专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个关于使用jQuery处理表格中元素点击事件的问题。具体来说，在使用模板引擎渲染表格时，如何正确地通过点击事件获取当前行的特定元素（如ID）。修正后的代码能够确保点击不同行时能正确获取对应的元素ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目前端用的是html和tpl模板。在后台查询数据返回到模板中展示，需要点击一行查看详情。

1.在.tpl中定义

{{each organizations as org}}
    <tr>
        <td id ="detail">
            {{org.orgName}}
            <input type="text" id="orgId" value="{{org.orgId}}"/>
        </td>
    </tr>
{{/each}}

2.有问题的js代码

$("#orgPostList").on('click', '#org-post-list tr #detail', function() {
    $("#orgPostDetailDiv").show();
    var orgId = $("#orgId").val();
    alert(orgId);
});

遇到的问题是：
比如说表格中显示两条数据，点击第二行的id和第一行的id相同。这显然是不正确的。

3.改正后的js代码

$("#orgPostList").on('click', '#org-post-list tr #detail', function() {
    $("#orgPostDetailDiv").show();
    var orgId = $(this).find("#orgId").val();
    alert(orgId);
});

找到选中行的id是orgId，这样就可以了。