如何通过点击数据属性元素让水平滚动表格滚动到指定位置？

嘿，我来帮你搞定这个表格滚动的问题！你现在遇到的核心问题是点击事件没精准绑定到日期元素，而且滚动逻辑没和表格里的日期单元格关联起来，咱们一步步解决：

一、修复当前点击日期无效的问题 #

你之前监听的是整个body的点击，这会导致触发逻辑混乱，而且没针对日期元素做处理。咱们调整一下代码：

假设你的左侧日期元素有统一的类（比如.side-date），表格里的日期表头单元格也有对应的类（比如.table-date），修改后的代码如下：

jQuery(document).ready(function() {
    // 保留克隆表格的原有逻辑
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');

    // 精准监听左侧日期元素的点击事件
    $(".side-date").on("click", function() {
        // 获取点击的日期文本（比如"2018-04-03"）
        const clickedDate = $(this).text().trim();
        
        // 转换成表格里的日期格式（比如"Apr 03"），如果两侧格式一致可以跳过这步
        const targetDateText = new Date(clickedDate).toLocaleDateString('en-US', { 
            month: 'short', 
            day: '2-digit' 
        });

        // 在克隆的表格中找到对应日期的单元格
        const targetCell = $(".clone .table-date:contains('" + targetDateText + "')");
        
        if (targetCell.length > 0) {
            // 计算需要滚动的距离：单元格左偏移量减去固定侧边栏的宽度
            const scrollPosition = targetCell.offset().left - side_width;
            // 平滑滚动到目标位置（也可以用$("#table-scroll").scrollLeft(scrollPosition)实现瞬间滚动）
            $("#table-scroll").animate({ scrollLeft: scrollPosition }, 300);
        }
    });
});

// 确保元素加载完成后再计算侧边栏宽度，也可以把这行放到ready函数里
var side_width = $( ".fixed-side" ).width() + 262;

关键调整点： #

• 把点击事件绑定到具体的日期元素（.side-date），避免无关点击触发逻辑；
• 处理日期格式转换，确保和表格里的文本匹配，如果两侧日期格式完全一致，这步可以直接省略；
• 通过offset().left获取目标单元格的水平位置，结合侧边栏宽度计算出准确的滚动距离，实现精准定位。

二、通过数据属性实现通用滚动定位 #

如果想让这个功能更灵活、扩展性更强，推荐用数据属性来关联点击元素和目标单元格：

1. 给左侧日期元素添加data-scroll-target属性，值对应表格里目标单元格的选择器（ID或类）：

<!-- 左侧日期元素示例 -->
<div class="side-date" data-scroll-target="#date-apr-03">2018-04-03</div>

<!-- 表格中对应的日期单元格示例 -->
<th id="date-apr-03" class="table-date">Apr 03</th>

2. 编写通用的点击事件逻辑：

jQuery(document).ready(function() {
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');

    // 监听所有带data-scroll-target属性的元素
    $("[data-scroll-target]").on("click", function() {
        // 获取数据属性里的目标选择器
        const targetSelector = $(this).data("scroll-target");
        // 在克隆表格中找到目标单元格
        const targetCell = $(".clone " + targetSelector);
        
        if (targetCell.length > 0) {
            const scrollPosition = targetCell.offset().left - side_width;
            $("#table-scroll").animate({ scrollLeft: scrollPosition }, 300);
        }
    });
});

var side_width = $( ".fixed-side" ).width() + 262;

这种方法的好处是不用处理日期格式转换，直接通过选择器精准定位，哪怕以后要给其他元素（比如项目名称、分类）添加滚动定位，只要给元素加上data-scroll-target属性就能复用逻辑，非常灵活。

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