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

Question

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

 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'
          }
        }]
      },
    }

Answer 1

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>