为 HTML 表创建动态行跨度

Question

问题：正在寻找 Jquery 或 javascript 解决方案来创建动态表以及 Rowspan。我面临获取父行并添加行跨度的问题。

非常感谢您的帮助。

这是我的 JSON 格式

 {"nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}

这是我想要达到的目标

table look

HTML

<table>
  <tbody>
<tr class="odd">
  <td rowspan="7">All</td>
  <td rowspan="6">Incident Management</td>
  <td rowspan="6">Global</td>
  <td rowspan="2">Bangalore</td>
  <td rowspan="1">85.00%</td>
  <td rowspan="1">90.00%</td>
  <td rowspan="1">test</td>
</tr>
<tr class="even">
  <td rowspan="1">90.00%</td>
  <td rowspan="1">95.00%</td>
  <td rowspan="1">test</td>
</tr>
<tr class="odd">
  <td rowspan="2">Frimley</td>
  <td rowspan="1">85.00%</td>
  <td rowspan="1">90.00%</td>
  <td rowspan="1">test</td>
</tr>
<tr class="even">
  <td rowspan="1">90.00%</td>
  <td rowspan="1">95.00%</td>
  <td rowspan="1">test</td>
</tr>
<tr class="odd">
  <td rowspan="2">Palo Alto</td>
  <td rowspan="1">85.00%</td>
  <td rowspan="1">90.00%</td>
  <td rowspan="1">test</td>
</tr>
<tr class="even">
  <td rowspan="1">90.00%</td>
  <td rowspan="1">95.00%</td>
  <td rowspan="1">test</td>
</tr>
<tr class="odd">
  <td rowspan="1">Service Availability</td>
  <td rowspan="1">Global</td>
  <td rowspan="1">N/A</td>
  <td rowspan="1">85.00%</td>
  <td rowspan="1">90.00%</td>
  <td rowspan="1">test</td>
</tr>

Answer 1

虽然一个。

var data = {"data":"Start","nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}

function getNodeCount(obj){
	var num = 0
	if(obj.nodes){
		for(var i=0;i<obj.nodes.length;i++){
			num += getNodeCount(obj.nodes[i])
		}
	}else
		num = 1
	return num
}

function createRowHTML(data,html){
	if(html==null) html = '<tr>'
	html += '<td rowspan="'+getNodeCount(data)+'">'+data.data+'</td>'
	if(data.nodes){
		for(var i=0;i<data.nodes.length;i++){
			if(i==0)
				html += createRowHTML(data.nodes[i],'')
			else
				html += createRowHTML(data.nodes[i])
		}
	}else
		html += '</tr>'
	return html
}


var html = createRowHTML(data)



document.getElementById('result').innerHTML = '<table>'+html+'</table>'

table td{
  border: solid 1px black;
}

<div id="result"></div>