jQuery 实现table第几行第几列显示对应的数据

林卤蛋

于 2023-02-20 16:27:23 发布

阅读量617

点赞数

分类专栏：技术文档文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/ARLENE2/article/details/129126762

版权

技术文档专栏收录该内容

16 篇文章

订阅专栏

该代码示例展示了如何用jQuery处理接口返回的arrange_list数组，将数据填充到table的特定行和列中。根据数据，它还会为单元格添加颜色，并在满足条件时显示订单数量。函数getTableTh遍历数组并查找匹配的表格单元格，而add_data函数负责设置单元格的颜色和内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 实现table第几行第几列显示对应的数据

需求
根据接口数据在对应的格子上填充颜色

// 循环数组设置第几行第几列的数据
    function getTableTh() {
        arrange_list.forEach((item, index) => { // arrange_list为接口传来的数组
            item.time_list.forEach((element, i) => {
                $('#cw_drag_table th').each(function() { // 循环表格th
                    if ($(this).text() == element.title) {
                        add_data(index + 1, i + 1, element.order_count) // index + 1为第几行，i + 1为第几列，element.order_count为格子要显示的数据
                    }
                })
            });
        });
    }


    // 给表格设置颜色，并按要求显示订单数
    function add_data(row_num, c_num, data) {
        var tb = $('#cw_drag_table')
        if (tb.length > 0) {
            var trs = tb.find('tr');
            var tds = $(trs[row_num]).find('td');
            var td = tds[c_num];
            if (data > 0) {
                // 按天查看，方格标上颜色，不需要显示订单数
                // 按周、按月查看，方格标上颜色，并显示订单数
                if ($('.select_date_active').val() == '1' || $('.select_date_active').val() == '2') {
                    $(td).addClass('is_green')
                } else {
                    $(td).html(data);
                    $(td).addClass('is_green')
                }
            }
        }
    }