jquery让table实现跨行
<html>
<head>
<title></title>
jquery-2.1.0.js"type="text/javascript"charset="utf-8"></script>
table {
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tbody>
</tbody>
</table>
</body>
var data = [{
"id": 49206,
"tid": 1607220057312065,
"hash": "5be470e6a04c3be9f61339f81bfeebbf",
"hao": "D350050548",
"ming": "钢结构工程专业承包三级",
"leibie": "建筑业企业资质",
"riqi": "2018-08-16",
"youxiaoqi": "2021-04-10",
"jiguan": "重庆市渝北区建委",
"created_at": null,
"updated_at": null
},
{
"id": 49203,
"tid": 1607220057312065,
"hash": "1c1dbaa79b9715ad0258f675f7a4f7c8",
"hao": "D250027093",
"ming": "建筑幕墙工程专业承包二级",
"leibie": "建筑业企业资质",
"riqi": "2018-08-16",
"youxiaoqi": "2021-04-24",
"jiguan": "重庆市城乡建设委员会",
"created_at": null,
"updated_at": null
},
{
"id": 49204,
"tid": 1607220057312065,
"hash": "2d73546e61863aa3d419042ce3dfa74d",
"hao": "D250027093",
"ming": "防水防腐保温工程专业承包二级",
"leibie": "建筑业企业资质",
"riqi": "2018-08-16",
"youxiaoqi": "2021-04-24",
"jiguan": "重庆市城乡建设委员会",
"created_at": null,
"updated_at": null
},
{
"id": 49205,
"tid": 1607220057312065,
"hash": "7371f8755cd81fa6c2f4105d82e59d8c",
"hao": "D250027093",
"ming": "建筑装修装饰工程专业承包二级",
"leibie": "建筑业企业资质",
"riqi": "2018-08-16",
"youxiaoqi": "2021-04-24",
"jiguan": "重庆市城乡建设委员会",
"created_at": null,
"updated_at": null
}
]
function render(tableId, miankey) {
var table = $(tableId);
var miankey = miankey
var tbody = table.find("tbody");
var trs = [];
return {
full: function(data) {
data.map(function(item, index) {
var tr = $('<tr><td data-key="xh">' + index + '</td><td data-key="leibie">' + item.leibie + '</td><td data-key="ming">' + item.ming + '</td><td data-key="youxiaoqi">' + item.youxiaoqi + '</td><td data-key="jiguan">' + item.jiguan + '</td><td data-key="hao">' + item.hao + '</td></tr>')
var bitem;
if(index > 0) {
bitem = data[index - 1];
if(bitem[miankey] == item[miankey]) {
for(var i in item) {
if(item[i] == bitem[i]) {
if(tr.find('[data-key="' + i + '"]').length) {
tr.find('[data-key="' + i + '"]').remove();
for(var n = trs.length - 1; n >= 0; n--) {
if(trs[n].find('[data-key="' + i + '"]').length) {
trs[n].find('[data-key="' + i + '"]').attr("rowspan", trs.length - n + 1);
break;
}
}
}
}
}
}
}
trs.push(tr)
});
trs.map(function(item, index) {
tbody.append(item)
})
}
}
}
render("table", "leibie").full(data)
</script>
</html>
