如何从克隆表格获取data属性？点击任务alert data-name返回undefined

嘿，我看你在处理滚动表格的点击交互时碰到了小麻烦：点击任务项想弹出data-name的属性值，结果却返回了undefined。结合你给出的代码片段，我帮你捋捋问题根源和解决办法：

问题根源 #

出现undefined的核心原因基本是这两点：

• 你的点击事件绑定在了body上，但没有过滤出实际被点击的任务项元素，导致你获取的是body或者其他无关元素的data-name，自然拿不到有效数值。
• 可能你的选择器没匹配到带有data-name的目标元素（比如克隆后的表格元素选择有误）。

修正后的代码方案 #

我把你的代码调整了下，重点优化了点击事件的逻辑，确保精准定位目标元素：

jQuery(document).ready(function() {
    // 保留你原来的表格克隆和滚动定位逻辑
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
    $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);

    // 修正点击事件：指定目标选择器，精准捕获任务项点击
    $("body").on("click", ".fixed-side", function(e) { // 这里用你提到的th.fixed-side作为目标选择器，可根据实际调整
        e.stopPropagation(); // 阻止事件冒泡，避免触发body上的其他点击逻辑
        // 获取data-name属性值，两种方式都适用
        var taskName = $(this).data('name'); 
        // 若data-name是动态修改的，用 $(this).attr('data-name') 读取会更准确
        alert(taskName); // 弹窗显示属性值
    });
});

额外排查建议 #

如果还是返回undefined，可以按这两步排查：

1. 检查元素属性是否存在：右键点击任务项→“检查”，查看元素HTML里有没有data-name="xxx"的属性，确认属性本身是存在的。
2. 验证选择器是否正确：在浏览器控制台输入$('.fixed-side').first().data('name')，如果能返回正确值，说明选择器没问题；如果还是undefined，那就是选择器没匹配到目标元素，需要调整选择器（比如加上克隆表格的.clone类：.clone .fixed-side）。

关键注意点 #

• 事件委托时一定要加上目标元素的选择器，不要直接给body绑定点击事件却不做过滤，否则很容易误触发其他元素的点击。
• 用jQuery获取data-*属性时，.data('name')会自动处理驼峰命名（比如data-task-name可以用.data('taskName')获取），而.attr('data-name')是直接读取属性原始值，适合动态修改过的属性场景。

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