你吃西瓜皮 2019-02-26 13:58 采纳率: 100%
浏览 1077
已采纳

forEach遍历json数据填充表格,删除指定行。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>

    <body>
        <table id='tab' border="1">
            <thead>
                <tr style="background-color:#CCCCCC;">
                    <th>名称</th>
                    <th>数量</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>
    </body>
    <script>
        //水果数量
        var fruit = {
            '苹果': 0,
            '香蕉': 2,
            '水梨': 0,
            '葡萄': 8,
            '火龙果': 14,
        }
        var tianmao = [{
                id: 1,
                name: '橘子',
                price: 8
            },
            {
                id: 2,
                name: '香蕉',
                price: 8
            },
            {
                id: 3,
                name: '橘子',
                price: 8
            },
            {
                id: 4,
                name: '水梨',
                price: 8
            },
            {
                id: 5,
                name: '火龙果',
                price: 8
            },
            {
                id: 6,
                name: '葡萄',
                price: 8
            }
        ]

        tianmao.forEach(function(obj) {
            /*for(var i in tianmao) {
                for(var k in tianmao[i]) {
                    if(tianmao[i][k] == "undefined") {
                        //delete tianmao[i];
                        tianmao.splice(i, 1);
                        i = i - 1;
                        break;
                    }
                }
            }*/

            var str = '<tr><td>' + obj.name + '</td><td>' + fruit[obj.name] + '</td><td>' + obj.price + '</td></tr>'
            $("#tab tbody").append(str);
        });

        //方法一
        /*$('#tab').find('tr').each(function() {
            var num = $(this).find("td").eq(1).html();
            if(num == 0 || num == 'undefined') {
                $(this).find("td").parent().remove(); //删除td所在行
            }
        });*/
    </script>

</html>

通过遍历数据得到table如图,现在想删除掉数量未定义和为0的行tr,但实际table是带有分页得,方法一遍历不到所有得行(只能一页)行不通,怎么在append前,处理json得到想要得结果。谢谢十分~

图片说明

  • 写回答

3条回答 默认 最新

  • 你吃西瓜皮 2019-02-26 16:07
    关注
    tianmao.forEach(function(obj) {
                var str = '<tr><td>' + obj.name + '</td><td>' + fruit[obj.name] + '</td><td>' + obj.price + '</td></tr>'
                if(fruit[obj.name] !=0 && fruit[obj.name] !=undefined){
                    $("#tab tbody").append(str);
        }
            });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 关于PHP中POST获取数据的问题
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥30 德飞莱51单片机实现C4炸弹
  • ¥50 CrossLink-LIF-MD6000 型 FPGA 的 CMOS 转 MIPI D-PHY IP 核功能使用异常
  • ¥15 proteus控制16x16LED点阵显示屏的设计