第二章:自定义表格渲染

概述

关于原生表格合并的处理方法有很多种，目前我对这种数据格式进行处理

let data = [{
   columns: ['a1', 'b1', 'c1'],
   colSpan: [1, 1, 1],
   rowSpan: [2, 1, 1]
}, {
   columns: ['a2', 'b2', 'c2'],
   colSpan: [1, 1, 1],
   rowSpan: [0, 2, 1]
}, {
   columns: ['a3', 'b3', 'c3'],
   colSpan: [1, 1, 1],
   rowSpan: [2, 0, 1]
}, {
   columns: ['a4', 'b4', 'c4'],
   colSpan: [1, 2, 0],
   rowSpan: [0, 1, 1]
}]

let table = document.createElement('table')
table.border='border'
let tbody = ''
for (let i = 0; i < data.length; i++) {
   tbody += `<tr>`
   for (let j = 0; j < data[i].columns.length; j++) {
       if(data[i].rowSpan[j]&&data[i].colSpan[j]){
         tbody += `<td  rowspan="${data[i].rowSpan[j]}" colspan="${data[i].colSpan[j]}">${data[i].columns[j]}</td>`
       }
   }
   tbody += `</tr>`
}
table.innerHTML = tbody
document.body.append(table)

皖ICP备2021019095号-1

皖公网安备 34012202341074号