时间戳

首页 > 解决方案 > 在jquery中获取父级单击模式

javascript - 在jquery中获取父级单击模式

问题描述

我有一个有很多行的表。

我表中的每个tr标签都有data-id属性。并有一些td内部和带有引导程序的显示模式。tdbutton

我的桌子是这样的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table class="table">
                <tbody>
               <tr data-id="1">
                    <td>name</td>
                    <td>phone</td>
                    <td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
                    <td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
                  
               </tr>
             
               <tr data-id="1">
                    <td>name</td>
                    <td>phone</td>
                    <td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
                    <td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
                   
               </tr>
             
            </tbody>
            </table>

我想用 jquery 进入我的表data-id中的 tr 父级buttons

我尝试了一些代码，但它们都得到了目标模态路径的类

我试试这段代码

   getDataSrc('.calls', 'data-src');

    function getDataSrc(target, attr){
      $(target).click(function(){
        var id = $(this).parent().parent().attr(attr);
        alert(id);
      });

    }

标签： javascripthtmljquery

解决方案

$('.btn').click(function(e){
    e.preventDefault();
    var id = $(this).parents('tr').data('id');
    console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
                <tbody>
               <tr data-id="1">
                    <td>name</td>
                    <td>phone</td>
                    <td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
                    <td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
                  
               </tr>
             
               <tr data-id="2">
                    <td>name</td>
                    <td>phone</td>
                    <td><button class="call-list btn btn-primary calls" data-toggle="modal" data-target=".calls">calls</button></td>
                    <td><button class="call-add btn btn-success porsuits" data-toggle="modal" data-target=".pursuits">pursuit</button></td>
                   
               </tr>
             
            </tbody>
            </table>

此代码将在控制台中返回单击元素的 id

推荐阅读