jQuery获取表格行td的data-email属性返回undefined问题排查

问题根因 #

$(this).parents('tr:first').find('td') 会返回当前行下所有3个<td>元素组成的jQuery集合，而jQuery的.data()方法仅会读取集合中第一个元素的对应data属性：

• 第一个<td>只有data-name属性，所以调用.data('name')能正常拿到值
• 第一个<td>没有data-email属性，所以调用.data('email')返回undefined

修复方案 #

方案1：精准定位对应读取属性 #

$('.delete').click(function (e) {
    e.preventDefault();
    // 用closest比parents更高效，直接找最近的父级tr
    const $currentTr = $(this).closest('tr');
    // 按位置取对应td
    const name = $currentTr.find('td:eq(0)').data('name');
    const email = $currentTr.find('td:eq(1)').data('email');
    // 也可以按属性筛选定位：
    // const email = $currentTr.find('td[data-email]').data('email');
    if (confirm(name + ' ' + email + ' delete?')) {
        // 后续逻辑
    }
})

方案2（更推荐）：直接把属性绑定在删除按钮上 #

不用遍历DOM找父级、找，代码更简洁性能更好：

1. 先修改HTML结构：

<tr>
    <td><?php echo $name ?></td>
    <td><?php echo $email ?></td>
    <td>
        <form method='post'>
            <!-- 把需要的参数直接存在按钮的data属性里 -->
            <button class='delete' name='delete' data-name='<?php echo $name ?>' data-email='<?php echo $email ?>' ...>Remove</button>
        </form>
    </td>
<tr>

2. 对应JS简化为：

$('.delete').click(function (e) {
    e.preventDefault();
    const name = $(this).data('name');
    const email = $(this).data('email');
    if (confirm(name + ' ' + email + ' delete?')) {
        // 后续逻辑
    }
})

内容的提问来源于stack exchange，提问作者A. Volg