jQuery获取选中表格单元格data-value值，map方法返回空数组问题解决

问题原因 #

你遇到空数组的问题主要有三处错误：

• 读取属性错误：td元素没有原生value属性，你存储值用的是自定义data-value属性，不能用this.value读取。
• 选择器写法错误：代码里的tr>td是HTML转义后的字符，在JS里直接写会导致选择器失效，无法匹配到对应元素移除选中类，也会导致后续拿不到.selected元素。
• 逻辑缺失：现有代码只实现了同列排他，没有处理同行排他，不符合「每行、每列仅可选中一个单元格」的要求。

修正后代码 #

$(document).on("click", ".test td", function() {
    const $current = $(this);
    const colIndex = $current.index();
    const $table = $current.closest('table');
    // 移除同列所有选中状态
    $table.find(`tr>td:nth-child(${colIndex + 1})`).removeClass('selected');
    // 移除同行所有选中状态
    $current.closest('tr').find('td').removeClass('selected');
    // 给当前点击单元格加选中状态
    $current.addClass('selected');
    
    // 提取所有选中单元格的data-value
    const selectedValues = $('.selected').map(function () {
        // 读取自定义data-value属性，也可以写为 return this.dataset.value;
        return $(this).data('value');
    }).get();
        
    console.log(selectedValues);
});

效果说明 #

点击单元格后，会自动清空当前行、当前列的其他选中状态，仅保留当前点击单元格为选中状态，最终返回的数组会存储所有选中单元格的data-value值。

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