如何通过jQuery获取触发Bootstrap模态框按钮所在tr的data-id属性

咱们先拆解下你代码里的问题，再给出靠谱的解决方案：

问题分析 #

1. 参数传错了：你调用getDataSrc('.calls', 'data-src')时，第二个参数是data-src，但你实际要获取的是<tr>上的data-id属性，这就导致拿错了目标；
2. 元素定位不够健壮：用parent().parent()来定位<tr>太依赖固定DOM结构，如果后续<td>里加了嵌套元素（比如用div包裹按钮），这方法直接失效，更稳妥的是用向上查找的专用方法。

修正后的完整代码 #

<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>

<script>
// 给calls按钮绑定逻辑，传入正确的属性名data-id
getDataSrc('.calls', 'data-id');
// 顺便给pursuit按钮也加上同样的逻辑
getDataSrc('.porsuits', 'data-id');

function getDataSrc(target, attr){
  $(target).click(function(){
    // 用closest('tr')代替parent().parent()，灵活适配DOM结构变化
    var id = $(this).closest('tr').attr(attr);
    // 也可以用jQuery的data()方法简化写法，自动识别data-前缀
    // var id = $(this).closest('tr').data(attr.replace('data-', ''));
    alert(id);
  });
}
</script>

关键改进点说明 #

• 修正参数：把调用时的第二个参数改成data-id，对应<tr>上的目标属性；
• 健壮的元素定位：closest('tr')会从当前按钮开始向上遍历DOM树，精准找到最近的<tr>元素，就算按钮的父元素结构调整也不会失效；
• 可选简化写法：用data('id')可以直接获取data-id的值，不需要写完整的data-前缀，代码更简洁。

另外我把第二个<tr>的data-id改成了2，方便你测试不同行的按钮能拿到对应id~

内容的提问来源于stack exchange，提问作者mohammad13