点击表格行编辑按钮时，Bootstrap Modal始终显示首行数据的解决方法

问题现象 #

点击表格任意行的编辑按钮，Modal始终加载并显示表格第一行的数据，无法获取点击行的对应内容。

错误原因 #

1. ID重复问题：循环生成的编辑按钮都使用了相同的id="call-button"，DOM中ID必须唯一，jQuery通过ID选择器绑定事件时，只会给第一个匹配的元素绑定事件，导致所有按钮点击后都执行第一行的逻辑。
2. 选择器语法错误：脚本中$("call-persnoel-name")缺少ID选择器前缀#，导致无法找到对应输入框赋值。

修复步骤 #

1. 修改表格按钮的HTML结构 #

将按钮的唯一ID改为可复用的class，确保每个按钮都能被正确绑定事件：

<!-- 原按钮代码 -->
<a class="edit-item-btn" id="call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i class="ri-phone-line fs-16"></i></a>

<!-- 修改后 -->
<a class="edit-item-btn call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i class="ri-phone-line fs-16"></i></a>

2. 修正jQuery脚本 #

• 将事件绑定目标从ID改为class，确保所有按钮都能触发对应行的逻辑
• 修正选择器错误，添加缺失的#
• 优化代码：缓存当前行对象，减少DOM查找；用trim()去除文本空白

<script type="text/javascript">
    $(document).ready(function () {
        $(".call-button").click(function() {
            // 缓存当前点击按钮所在的行，避免重复查找DOM
            var currentRow = $(this).closest('tr');
            
            // 获取当前行的所有数据，trim()去除前后空白
            var nameSurname = currentRow.find('.table-namesurname').text().trim();
            var phoneNumber = currentRow.find('.table-phonenumber').text().trim();
            var note = currentRow.find('.table-note').text().trim();
            var status = currentRow.find('.table-status').text().trim();
            var callName = currentRow.find('.table-callname').text().trim();
            
            // 给Modal输入框赋值，修正选择器错误
            $("#call-name-surname").val(nameSurname);
            $("#call-phone-number").val(phoneNumber);
            $("#call-note-field").val(note);
            $("#call-status-field").val(status);
            $("#call-persnoel-name").val(callName);
        });
    });
</script>

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