layui table怎么横向合并单元格
需求是单击表格可以直接输入，静态页面不和后台进行交互，我用的是layui的table组件 怎么合并单元格 就想图片中最下面的内两行，横着合并。
求解答
这些管网应该有案例的
语文非常厉害的我表示没看懂，合并后长啥样有没个简易图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link crossorigin="anonymous"
integrity="sha512-SSF+OBDODWTSIqOivYBOyOKQ93PBDevipJEUEWtkUbTt4v34rmgPcCXcBMolxZIJcuobcdqmYJlonjUBEbOzNw=="
href="https://lib.baomitu.com/layui/2.7.6/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- <table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称</th>
<th lay-data="{field:'experience', width:80}">积分</th>
<th lay-data="{field:'sign'}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table> -->
<table id="demo" lay-filter="test"></table>
<script crossorigin="anonymous"
integrity="sha512-mIKH3M2bRlIyhG4tBEbJ8dn8t8JFlNJU2NXlJePgpQ72CK4jAYsZyCGFcASRGtPBbcAQhz67KTkA1Jw6Kizk9g=="
src="https://lib.baomitu.com/layui/2.7.6/layui.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script>
function merge(res) {
var data = res.data;
var mergeIndex = 0;//定位需要添加合并属性的行数
var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
var columsName = ['username', 'sex'];// 需要合并的列名称
var columsIndex = [2, 3];//需要合并的列索引值
for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
$(this).attr("rowspan", mark);
});
tdCurArr.each(function () {//当前行隐藏
$(this).css("display", "none");
});
} else {
mergeIndex = i;
mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
}
}
mergeIndex = 0;
mark = 1;
}
}
layui.use('table', function () {
// var table = layui.table;
//转换静态表格
// table.init('demo', {
// height: 315 //设置高度
// , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
// //支持所有基础参数
// });
var table = layui.table;
// 第一个实例
table.render({
elem: '#demo'
, height: 312,
done: function (res, curr, count) {
console.log(res, curr, count, '===123')
merge(res);
},
// , url: 'https://layuiweb.com/demo/table/user/-page=1&limit=30.js' //数据接口
data: [
{
"id": 10000,
"username": "user-0",
"sex": "濂\ufffd",
"city": "鍩庡競-0",
"sign": "绛惧悕-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "浣滃",
"score": 57
},
{
"id": 10001,
"username": "user-1",
"sex": "鐢\ufffd",
"city": "鍩庡競-1",
"sign": "绛惧悕-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "璇嶄汉",
"score": 27
},
{
"id": 10002,
"username": "user-2",
"sex": "濂\ufffd",
"city": "鍩庡競-2",
"sign": "绛惧悕-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "閰辨补",
"score": 31
},
{
"id": 10003,
"username": "user-3",
"sex": "濂\ufffd",
"city": "鍩庡競-3",
"sign": "绛惧悕-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "璇椾汉",
"score": 68
},
{
"id": 10004,
"username": "user-4",
"sex": "鐢\ufffd",
"city": "鍩庡競-4",
"sign": "绛惧悕-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "浣滃",
"score": 6
},
{
"id": 10005,
"username": "user-5",
"sex": "濂\ufffd",
"city": "鍩庡競-5",
"sign": "绛惧悕-5",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "浣滃",
"score": 87
},
{
"id": 10006,
"username": "user-6",
"sex": "濂\ufffd",
"city": "鍩庡競-6",
"sign": "绛惧悕-6",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "浣滃",
"score": 34
},
{
"id": 10007,
"username": "user-7",
"sex": "鐢\ufffd",
"city": "鍩庡競-7",
"sign": "绛惧悕-7",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "浣滃",
"score": 28
},
{
"id": 10008,
"username": "user-8",
"sex": "鐢\ufffd",
"city": "鍩庡競-8",
"sign": "绛惧悕-8",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "璇嶄汉",
"score": 14
},
{
"id": 10009,
"username": "user-9",
"sex": "濂\ufffd",
"city": "鍩庡競-9",
"sign": "绛惧悕-9",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "璇嶄汉",
"score": 75
},
{
"id": 10010,
"username": "user-10",
"sex": "濂\ufffd",
"city": "鍩庡競-10",
"sign": "绛惧悕-10",
"experience": 1016,
"logins": 182,
"wealth": 71294671,
"classify": "璇椾汉",
"score": 34
},
{
"id": 10011,
"username": "user-11",
"sex": "濂\ufffd",
"city": "鍩庡競-11",
"sign": "绛惧悕-11",
"experience": 492,
"logins": 107,
"wealth": 8062783,
"classify": "璇椾汉",
"score": 6
},
{
"id": 10012,
"username": "user-12",
"sex": "濂\ufffd",
"city": "鍩庡競-12",
"sign": "绛惧悕-12",
"experience": 106,
"logins": 176,
"wealth": 42622704,
"classify": "璇嶄汉",
"score": 54
},
{
"id": 10013,
"username": "user-13",
"sex": "鐢\ufffd",
"city": "鍩庡競-13",
"sign": "绛惧悕-13",
"experience": 1047,
"logins": 94,
"wealth": 59508583,
"classify": "璇椾汉",
"score": 63
},
{
"id": 10014,
"username": "user-14",
"sex": "鐢\ufffd",
"city": "鍩庡競-14",
"sign": "绛惧悕-14",
"experience": 873,
"logins": 116,
"wealth": 72549912,
"classify": "璇嶄汉",
"score": 8
},
{
"id": 10015,
"username": "user-15",
"sex": "濂\ufffd",
"city": "鍩庡競-15",
"sign": "绛惧悕-15",
"experience": 1068,
"logins": 27,
"wealth": 52737025,
"classify": "浣滃",
"score": 28
},
{
"id": 10016,
"username": "user-16",
"sex": "濂\ufffd",
"city": "鍩庡競-16",
"sign": "绛惧悕-16",
"experience": 862,
"logins": 168,
"wealth": 37069775,
"classify": "閰辨补",
"score": 86
},
{
"id": 10017,
"username": "user-17",
"sex": "濂\ufffd",
"city": "鍩庡競-17",
"sign": "绛惧悕-17",
"experience": 1060,
"logins": 187,
"wealth": 66099525,
"classify": "浣滃",
"score": 69
},
{
"id": 10018,
"username": "user-18",
"sex": "濂\ufffd",
"city": "鍩庡競-18",
"sign": "绛惧悕-18",
"experience": 866,
"logins": 88,
"wealth": 81722326,
"classify": "璇嶄汉",
"score": 74
},
{
"id": 10019,
"username": "user-19",
"sex": "濂\ufffd",
"city": "鍩庡競-19",
"sign": "绛惧悕-19",
"experience": 682,
"logins": 106,
"wealth": 68647362,
"classify": "璇嶄汉",
"score": 51
},
{
"id": 10020,
"username": "user-20",
"sex": "鐢\ufffd",
"city": "鍩庡競-20",
"sign": "绛惧悕-20",
"experience": 770,
"logins": 24,
"wealth": 92420248,
"classify": "璇椾汉",
"score": 87
},
{
"id": 10021,
"username": "user-21",
"sex": "鐢\ufffd",
"city": "鍩庡競-21",
"sign": "绛惧悕-21",
"experience": 184,
"logins": 131,
"wealth": 71566045,
"classify": "璇嶄汉",
"score": 99
},
{
"id": 10022,
"username": "user-22",
"sex": "鐢\ufffd",
"city": "鍩庡競-22",
"sign": "绛惧悕-22",
"experience": 739,
"logins": 152,
"wealth": 60907929,
"classify": "浣滃",
"score": 18
},
{
"id": 10023,
"username": "user-23",
"sex": "濂\ufffd",
"city": "鍩庡競-23",
"sign": "绛惧悕-23",
"experience": 127,
"logins": 82,
"wealth": 14765943,
"classify": "浣滃",
"score": 30
},
{
"id": 10024,
"username": "user-24",
"sex": "濂\ufffd",
"city": "鍩庡競-24",
"sign": "绛惧悕-24",
"experience": 212,
"logins": 133,
"wealth": 59011052,
"classify": "璇嶄汉",
"score": 76
},
{
"id": 10025,
"username": "user-25",
"sex": "濂\ufffd",
"city": "鍩庡競-25",
"sign": "绛惧悕-25",
"experience": 938,
"logins": 182,
"wealth": 91183097,
"classify": "浣滃",
"score": 69
},
{
"id": 10026,
"username": "user-26",
"sex": "鐢\ufffd",
"city": "鍩庡競-26",
"sign": "绛惧悕-26",
"experience": 978,
"logins": 7,
"wealth": 48008413,
"classify": "浣滃",
"score": 65
},
{
"id": 10027,
"username": "user-27",
"sex": "濂\ufffd",
"city": "鍩庡競-27",
"sign": "绛惧悕-27",
"experience": 371,
"logins": 44,
"wealth": 64419691,
"classify": "璇椾汉",
"score": 60
},
{
"id": 10028,
"username": "user-28",
"sex": "濂\ufffd",
"city": "鍩庡競-28",
"sign": "绛惧悕-28",
"experience": 977,
"logins": 21,
"wealth": 75935022,
"classify": "浣滃",
"score": 37
},
{
"id": 10029,
"username": "user-29",
"sex": "鐢\ufffd",
"city": "鍩庡競-29",
"sign": "绛惧悕-29",
"experience": 647,
"logins": 107,
"wealth": 97450636,
"classify": "閰辨补",
"score": 27
}
]
, page: true //开启分页
, cols: [[ //表头
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
, { field: 'username', title: '用户名', width: 80 }
, { field: 'sex', title: '性别', width: 80, sort: true }
, { field: 'city', title: '城市', width: 80 }
, { field: 'sign', title: '签名', width: 177 }
, { field: 'experience', title: '积分', width: 80, sort: true }
, { field: 'score', title: '评分', width: 80, sort: true, }
, { field: 'classify', title: '职业', width: 80 }
, { field: 'wealth', title: '财富', width: 135, sort: true }
]]
});
});
</script>
</body>
</html>
- 文章：Layui table表格单元格合并问题 中也许有你想要的答案，请看下吧
其实你下面3行，可以自己写的table，不需要用到组件的