使用JavaScript统计表格选中图书各分类数量的实现方案咨询

实现方案 #

1. 调整表格渲染逻辑，增加多选支持 #

修改你的loadAllBooks函数，新增复选框列，同时把图书分类存在行元素的自定义属性中方便后续读取：

function loadAllBooks() {
    $.getJSON('books.json', function (jsonData) {
        jsonArray = jsonData;
        var data = jsonArray;
        // 表头新增复选框列
        $(".allBookTable").html('<thead><th><input type="checkbox" id="selectAll"></th><th>ID</th><th>Name</th><th>Category</th><th>Price</th></thead><tbody class="filterAllTableBody"></tbody>');

        var containers = document.getElementsByClassName("filterAllTableBody");
        for (var i = 0; i < containers.length; i++) {
            for (var j = 0; j < data.length; j++) {
                var allTableRow = document.createElement("tr");
                var dataId = "allBooks" + j;
                allTableRow.setAttribute("data-id", dataId);
                // 把分类存在行的自定义属性里
                allTableRow.setAttribute("data-category", data[j].Category);
                allTableRow.className = "allBooks";
                // 行首新增复选框
                allTableRow.innerHTML = '<td><input type="checkbox" class="book-select"></td><td>' + (j + 1) + '</td> <td>' + data[j].Name + '</td> <td data-id="' + dataId + '">' + data[j].Category + '</td> <td>' + data[j].Price + '</td>';
                containers[i].appendChild(allTableRow);
            }
        }
    });
}

2. 新增选中状态样式 #

把以下代码加到你的CSS文件中，用于标识选中的行：

.allBooks.selected {
    background-color: #e6f2ff;
    cursor: pointer;
}

3. 新增选中监听与分类统计逻辑 #

新增以下JS代码，实现选中状态切换、分类计数、结果拼接展示：

// 事件委托绑定行点击和复选框点击事件
$(document).on('click', '.allBooks, .book-select', function(e) {
    // 避免点击复选框触发两次事件
    if (e.target.type === 'checkbox') {
        $(this).closest('tr').toggleClass('selected', this.checked);
    } else {
        const $checkbox = $(this).find('.book-select');
        $checkbox.prop('checked', !$checkbox.prop('checked'));
        $(this).toggleClass('selected', $checkbox.prop('checked'))
    }
    // 每次选中状态变化后更新统计结果
    updateSelectedCount();
})

// 可选：全选逻辑
$(document).on('click', '#selectAll', function() {
    $('.book-select').prop('checked', this.checked);
    $('.allBooks').toggleClass('selected', this.checked);
    updateSelectedCount();
})

// 统计选中分类数量的核心函数
function updateSelectedCount() {
    const countMap = {};
    // 遍历所有选中的行
    $('.allBooks.selected').each(function() {
        const category = $(this).data('category');
        // 计数累加
        countMap[category] = (countMap[category] || 0) + 1;
    })

    // 拼接展示文本
    let tipText = '你尚未选中任何图书';
    const countEntries = Object.entries(countMap);
    if (countEntries.length) {
        const parts = countEntries.map(([cate, count]) => `${count}本${cate}类图书`);
        if (parts.length === 1) {
            tipText = `你选中了${parts[0]}`;
        } else {
            // 最后一项前加“和”
            const lastPart = parts.pop();
            tipText = `你选中了${parts.join('、')}和${lastPart}`;
        }
    }
    // 把结果渲染到页面容器里
    $('.selected-count-tip').text(tipText);
}

4. 页面新增统计结果展示容器 #

在你需要展示统计提示的位置加入以下HTML代码即可：

<div class="selected-count-tip" style="margin: 10px 0; font-weight: 500;"></div>

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