在 jquery 中获取父级点击模式

Question

我有一个有很多行的表。

我表中的每个tr标签都有data-id属性。 并在里面有一些td ，并且td有用于显示带有引导程序的模式的button 。

我的桌子是这样的。

 <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 在我的表中buttons的 tr 父data-id

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

我试试这段代码

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

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

    }

Answer 1

 $('.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

Answer 2

You should create a function for button click, and from that function, you can access the parent dom for each using jQuery and also open bootstrap model.

function clickHandle(elm) {
    alert($(elm).closest("tr"));
}