*初级小白*~ 2023-04-12 14:39 采纳率: 97.9%
浏览 49
已结题

如何将obj对象变成绘制成图片的样子

如何将obj对象变成绘制成图片的样子

img


 const obj = {
      1: {
        data: [{
          note: '',
          one: {
            value: '',
            age: '3'
          },
          two: {
            value: '',
            age: '3'
          }
        }]
      },
      2: {
        data: [{
          note: '',
          one: {
            value: '',
            age: '3'
          },
          two: {
            value: '',
            age: '3'
          }
        }]
      },
      3: {
        data: [
          {
            note: '3月1日',
            one: {
              value: '',
              unit: '%'
            },
            two: {
              value: '',
              age: '3'
            }
          },
          {
            note: '3月2日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          }
        ]
      },
      4: {
        data: [
          {
            note: '4月1日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          },
          {
            note: '4月2日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          }
        ]
      },
      5: {
        data: [
          {
            note: '5月1日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          },
          {
            note: '5月2日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          }
        ]
      },
      6: {
        data: [
          {
            note: '6月1日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          },
          {
            note: '6月2日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          }
        ]
      },
      7: {
        data: [{
          note: '3',
          one: {
            value: '',
            age: '3'
          },
          two: {
            value: '',
            age: '3'
          }
        }]
      },
      8: {
        data: [{
          note: '3',
          one: {
            value: '',
            age: '3'
          },
          two: {
            value: '',
            age: '3'
          }
        }]
      },
      9: {
        data: [
          {
            note: '9月1日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          },
          {
            note: '9月2日',
            one: {
              value: '',
              age: '3'
            },
            two: {
              value: '',
              age: '3'
            }
          }
        ]
      },
      10: {
        data: [{
          note: '3',
          one: {
            value: '',
            age: '3'
          },
          two: {
            value: '',
            age: '3'
          }
        }]
      },
    }
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-04-12 14:44
    关注

    Object.keys(obj)得到序号依次遍历,然后再依次遍历data生成行

    
    <style>
        table.good {
            border-collapse: collapse
        }
    
            table.good td {
                border: solid 2px #000;
                padding: 3px 5px;
                text-align: center
            }
    
            table.good tr td:first-of-type {
                text-align: left
            }
    </style>
    <div id="dvHtml"></div>
    <script>
        const obj = {
            1: {
                data: [{
                    note: '',
                    one: {
                        value: '',
                        age: '3'
                    },
                    two: {
                        value: '',
                        age: '3'
                    }
                }]
            },
            2: {
                data: [{
                    note: '',
                    one: {
                        value: '',
                        age: '3'
                    },
                    two: {
                        value: '',
                        age: '3'
                    }
                }]
            },
            3: {
                data: [
                    {
                        note: '3月1日',
                        one: {
                            value: '',
                            unit: '%'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    },
                    {
                        note: '3月2日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    }
                ]
            },
            4: {
                data: [
                    {
                        note: '4月1日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    },
                    {
                        note: '4月2日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    }
                ]
            },
            5: {
                data: [
                    {
                        note: '5月1日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    },
                    {
                        note: '5月2日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    }
                ]
            },
            6: {
                data: [
                    {
                        note: '6月1日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    },
                    {
                        note: '6月2日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    }
                ]
            },
            7: {
                data: [{
                    note: '3',
                    one: {
                        value: '',
                        age: '3'
                    },
                    two: {
                        value: '',
                        age: '3'
                    }
                }]
            },
            8: {
                data: [{
                    note: '3',
                    one: {
                        value: '',
                        age: '3'
                    },
                    two: {
                        value: '',
                        age: '3'
                    }
                }]
            },
            9: {
                data: [
                    {
                        note: '9月1日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    },
                    {
                        note: '9月2日',
                        one: {
                            value: '',
                            age: '3'
                        },
                        two: {
                            value: '',
                            age: '3'
                        }
                    }
                ]
            },
            10: {
                data: [{
                    note: '3',
                    one: {
                        value: '',
                        age: '3'
                    },
                    two: {
                        value: '',
                        age: '3'
                    }
                }]
            },
        }
        let s = '';
        Object.keys(obj).forEach(i => {
            let rowSpan = obj[i].data.length;
            obj[i].data.forEach((item, index) => {
                s += `
    <tr>
    ${index == 0 ? "<td" + (rowSpan == 1 ? " colspan='2'" : " rowspan='" + rowSpan + "'") + ">" + i + "</td>" : ""}
    ${rowSpan == 1 ? "" : `<td>${item.note}</td>`}
    <td><input type="text"/></td>
    <td><input type="text"/></td>
    </tr>
    `
            })
    
        })
        console.log(s)
        s = `
    <table class="good"><tr><td>序号</td><td>年级</td><td>学生1</td><td>学生2</td></tr>
    ${s}
    </table>
    `
        document.getElementById('dvHtml').innerHTML = s;
    </script>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月21日
  • 已采纳回答 4月13日
  • 创建了问题 4月12日

悬赏问题

  • ¥115 用Java解决探地雷达dzt文件的解析过程
  • ¥20 有关神经网络这道(b)determine the parameters of neural network
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy