this problem is rather complicated
do you have front-end or back-end pages?
do you mean that the front end is merged or the back end is already merged when it is passed to you?
it's easy to merge cells at the front end. You can table rowspan on Baidu
.
the solution uses rowspan to merge
the specific code is as follows:
< hr >
<table width="20%" border="1" cellspacing="0" cellpadding="0" id="tab">
<thead>
<tr>
<th></th>
<th>id</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2"><input type="checkbox"/></th>
<th rowspan="2">1</th>
<th rowspan="2"></th>
<th>18</th>
</tr>
<tr>
<th>18</th>
</tr>
<tr>
<th><input type="checkbox"/></th>
<th>2</th>
<th></th>
<th>20</th>
</tr>
<tr>
<th><input type="checkbox"/></th>
<th>3</th>
<th></th>
<th>25</th>
</tr>
</tbody>
</table>
then you have to give your json data structure. Did you get the data from the server and render it?
< hr >
give me a general idea.
I think you should extract all the data first
something like this
[[{id:1,name:'...'},{id:1,name:'...'}],{id:2,name:'...'}]
table
< html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
td.hide {
display: none
}
</style>
</head>
<body>
<table width="20%" border="1" cellspacing="0" cellpadding="0" id="tb">
<thead>
<tr>
<td></td>
<td>id</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/><span>1</span></td>
<td>1</td>
<td></td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"/><span>1</span></td>
<td>1</td>
<td></td>
<td>28</td>
</tr>
<tr>
<td><input type="checkbox"/><span>2</span></td>
<td>2</td>
<td></td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox"/><span>3</span></td>
<td>3</td>
<td></td>
<td>25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var tb = document.getElementById('tb'),
rowscount = tb.rows.length,
cellcount = rowscount > 0 ? tb.rows[0].cells.length : 0,
innerHTML, rowspan, startRow;
for(var j = 0; j < cellcount; jPP) {
startRow = 0;
innerHTML = tb.rows[startRow].cells[j].innerHTML
rowspan = 1;
for(var i = 1; i < rowscount; iPP) {
if(tb.rows[i].cells[j].innerHTML == innerHTML && (j == 0 || i < startRow + parseInt(tb.rows[startRow].cells[0].getAttribute('rowspan') || 0))) {
rowspanPP;
tb.rows[i].cells[j].className = 'hide';
} else {
if(rowspan > 1) tb.rows[startRow].cells[j].setAttribute('rowspan', rowspan);
startRow = i;
innerHTML = tb.rows[i].cells[j].innerHTML
rowspan = 1
}
}
if(rowspan > 1) tb.rows[startRow].cells[j].setAttribute('rowspan', rowspan);
}
$('tbody tr').children('td:first-child').find('input').siblings().html('')
</script>
</body>
< / html >
this problem, it is easier to use template language. What I use here is Juicer template engine . The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table width="20%" border="1" cellspacing="0" cellpadding="0" id="tab">
<thead>
<tr>
<th></th>
<th>id</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<!-- <tr>
<th><input type="checkbox" /></th>
<th>1</th>
<th></th>
<th>18</th>
</tr>
<tr>
<th><input type="checkbox" /></th>
<th>1</th>
<th></th>
<th>28</th>
</tr>
<tr>
<th><input type="checkbox" /></th>
<th>2</th>
<th></th>
<th>20</th>
</tr>
<tr>
<th><input type="checkbox" /></th>
<th>3</th>
<th></th>
<th>25</th>
</tr> -->
</tbody>
</table>
<script src="./js/jquery.min.js"></script>
<script src="./js/juicer.js"></script>
<script>
function table_html(data) {
var tpl = [
'{@each content as it, k}',
'<tr>',
'{@if it.age.length==0}',
' <td><input type="checkbox"/></td>',
' <td>${it.id}</td>',
' <td>${it.sex}</td>',
'{@else}',
' <td rowspan="${it.age.length}"><input type="checkbox"/></td>',
' <td rowspan="${it.age.length}">${it.id}</td>',
' <td rowspan="${it.age.length}">${it.sex}</td>',
'{@/if}',
' <td>${it.age[0]}</td>',
'</tr>',
'{@if it.age.length>=2}',
' {@each it.age as it2, j}',
'{@if j!=0}',
'<tr>',
' <td>${it2}</td>',
'</tr>',
'{@/if}',
' {@/each}',
'{@/if}',
'{@/each}',
].join("\n");
return juicer(tpl, data);
}
//:
var data = {
content: [
{ id: 1, sex: '', age: [18, 28] },
{ id: 2, sex: '', age: [20] },
{ id: 3, sex: '', age: [25] },
]
};
var htl = table_html(data);
$('-sharptbody').html(htl);
</script>
</body>
</html>
effect is shown in figure
