如何用jQuery修改Laravel渲染的HTML表格的data属性与TD内容

云上老周

2026-5-15

问题：无法通过jQuery正确修改td的data-cel属性值

你遇到的问题其实是对jQuery的attr()和data()方法的用法理解有偏差，咱们一步步来解决：

首先，先拆解你代码里的问题点：

你写了$(this).data('data-cel','Hi')，这里犯了一个常见错误——jQuery的data()方法不需要带data-前缀，正确的键名应该是cel，而不是data-cel。
另外，attr()修改的是DOM元素上的实际属性（会在HTML结构里看到变化），而data()是修改jQuery内部缓存的数据，两者是独立的。如果你后续需要用$(this).data('cel')获取最新值，就需要同时更新这两处。

修正后的代码

我们可以把代码改成这样，既更新显示文本，又正确修改data-cel属性和jQuery缓存的data值：

$('.btnAlterarContato').click(function(){
    var Row = $(this).closest('tr');
    var Posicao = 1; // Switch: 1 = Id, 2 = Cel, 3 = Tel, 4 = Email
    Row.find('td').each(function(){
        switch(Posicao) {
            case 2:
                $(this).text('new value ');
                // 修改DOM上的data-cel属性（HTML结构会同步更新）
                $(this).attr('data-cel', 'Hi');
                // 同步更新jQuery缓存的data值（后续用data('cel')能拿到最新值）
                $(this).data('cel', 'Hi');
                break;
        }
        Posicao++;
    });
});

更高效的写法（可选）

其实你完全不用遍历所有td，因为你明确知道Cel列是第二列，直接定位目标元素会更简洁高效：

$('.btnAlterarContato').click(function(){
    // 直接找到当前行的第二列td（索引从0开始，所以是eq(1)）
    var celTd = $(this).closest('tr').find('td:eq(1)');
    celTd.text('new value ');
    celTd.attr('data-cel', 'Hi');
    celTd.data('cel', 'Hi');
});