如何向Bootbox.js确认对话框传递PHP循环生成的对应行学生ID

问题原因 #

你现有代码获取值失败的核心原因有两个：

• #StudentID 是ID选择器，你的学生ID列用的是class属性，且循环生成的多行列会出现重复ID，ID选择器只会匹配第一个匹配项
• val() 方法仅用于获取input、select等表单元素的值，<td>是普通DOM元素，需要用text()方法取值，且直接通过类名选择无法定位到当前点击行对应的ID

方案1（推荐）：通过data属性传递ID（无需DOM遍历，性能更高更稳定） #

第一步修改PHP循环代码 #

<?php
foreach ($student->student as $d) {
    echo
    '<tr>' 
        '<td class="StudentID">' . $d->ID . '</td>' .
        '<td>' . $d->Date . '</td>' .
        '<td>' . $d->Name . '</td>' .
        // 新增data-student-id属性存储当前行学生ID
        '<td><a class="show-confirmation" data-student-id="'.$d->ID.'">'. "click to confirm" . '</a></td>' .
    '</tr>';
}
?>

第二步修改JS代码 #

<script>
    $(document).on("click", ".show-confirmation", function(e) {
        // 直接从当前点击的a标签的data属性取ID
        var StudentID = $(this).data('student-id');

        bootbox.confirm("Confirm, student ID? " + StudentID, function(result) {
            console.log('This was logged in the callback: ' + result);
            console.log('StudentID: ' + StudentID);
        });
    });
</script>

方案2：不修改PHP，通过DOM遍历获取当前行ID #

如果不想改PHP生成代码，可以通过点击元素向上查找父级行再取对应列的值：

<script>
    $(document).on("click", ".show-confirmation", function(e) {
        // 先找当前a标签所在的tr行，再找行内class为StudentID的td，取文本内容
        var StudentID = $(this).closest('tr').find('.StudentID').text();

        bootbox.confirm("Confirm, student ID? " + StudentID, function(result) {
            console.log('This was logged in the callback: ' + result);
            console.log('StudentID: ' + StudentID);
        });
    });
</script>

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