我的輸入是

{

A1: {

B1: {

C1: {

D1: 1233,

D2: 11

},

C2: {

D1: 10,

D2: 10

}

},

B2: {

C1: {

D1: 10,

D2: 11

},

C2: {

D1: 10,

D2: 10

},

C3: {

D1: 10,

D2: 10

}

}

}

}

用什么框架都可以，只要求輸出以下table， json的最后一個(gè)節(jié)點(diǎn)就是table的最后一個(gè)column，并且只能占據(jù)一行，也就是rowspan要為1.然后難點(diǎn)在于怎么判斷前面的column占用的rowspan，我一點(diǎn)思路的都沒有囧…

更新:

如果有代碼演示最好了，底下評(píng)論的朋友謝謝了，我看了文章還是想不出來改怎么寫代碼…

回答：

樹的遞歸，根據(jù)后代葉子節(jié)點(diǎn)數(shù)量決定當(dāng)前節(jié)點(diǎn)所跨的行，深度優(yōu)先適合此場景。

代碼實(shí)現(xiàn)：http://jsrun.net/AXaKp/edit

function getRows (data) {

const result = []

const values = Object.values(data)

if (values.some(v => typeof v !== 'object' || !v || !Object.keys(v).length)) {

result.push([{

text: Object.keys(data).join(', '),

rowspan: 1

}])

return result

}

for (let k in data) {

const pathList = getRows(data[k])

if (pathList.length) {

const first = pathList[0]

first.unshift({

text: k,

rowspan: pathList.length

})

}

result.push(...pathList)

}

return result

}

function generateHtml (rows, head) {

return `

${ head.map(h => `

${h}`).join('') }

${rows.map(r => {

return `

${r.map(({ text, rowspan }) => `

${text}`).join('')}

`

}).join('\n')}

`

}

function render (data) {

const rows = getRows(data)

const head = (rows[0] || []).map(r => `Column-${r.text[0]}`)

const html = generateHtml(rows, head)

const div = document.createElement('div')

div.innerHTML = html

document.body.appendChild(div)

}

測試：

render(data)

效果：

回答：

這是一個(gè)樹形結(jié)構(gòu)，遍歷這棵樹，通過遞歸把每個(gè)節(jié)占據(jù)的行數(shù)算出來(就是每個(gè)子節(jié)點(diǎn)占據(jù)的行數(shù)之后)。然后你在渲染表格的時(shí)候就知道 rowspan 該是多少了(注意：如果為 1 可以省略哦)

給個(gè)提示

function calcRows(node) {

const keys = Object.keys(node);

const rowspan = node.rowspan = keys.reduce((sum, key) => sum + calcRows(node[key]), 0);

return rowspan;

}

回答：

把JSON對(duì)象視為樹，表格的單元格就是節(jié)點(diǎn)，每一行就是節(jié)點(diǎn)的路徑。這樣每個(gè)單元格的rowSpan就是其路徑的數(shù)量。

const data = {

A1: {

B1: {

C1: {

D1: 1233,

D2: 11

},

C2: {

D1: 10,

D2: 10

}

},

B2: {

C1: {

D1: 10,

D2: 11

},

C2: {

D1: 10,

D2: 10

},

C3: {

D1: 10,

D2: 10

}

}

}

}

// 利用遞歸方式的深度優(yōu)先遍歷算法計(jì)算每個(gè)節(jié)點(diǎn)的路徑數(shù)量，并保持路徑列表

function getPath(node, key) {

const pathList = Object.keys(node).reduce((pathList, key) => {

return pathList.concat(getPath(node[key], key));

}, [])

const pathCount = pathList.length;

pathList.map((path, index) => {

// 這里特殊處理下：只在第一條路徑里插入當(dāng)前節(jié)點(diǎn)key，其他路徑不插入，方便生成`tr`

path.unshift(!!index ? null : { key, pathCount })

return path;

});

return pathList.length ? pathList : [[{ key, pathCount: 1 }]]

}

// 路徑列表轉(zhuǎn)成`tr`列表

function toTableRows(data) {

const pathList = getPath(data, 'root');

const rows = pathList.map((row, index) => {

const tr = ['

'];

for(let i = 1; i < row.length; ++i) {

if(row[i]) {

const { key, pathCount } = row[i];

tr.push(`

${key}`)

}

}

return tr.join('')

})

return rows.join('')

}

document.getElementById('table').innerHTML = toTableRows(data)

總結(jié)

以上是生活随笔為你收集整理的写出表格的结构html,一个面试题，根据json结构生成html表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。