jquery 合并任意值相等的列单元格
程序员文章站
2024-02-28 18:37:10
...
今天在开发中遇到产品要把数据相同的表格合并到一起，在经过一番周折以后就实现了。现在把实现的代码做一下记录并分享！
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/activity/IncomeData/">收入数据查询</a></li>
</ul>
<form:form id="searchForm" modelAttribute="IncomeData" action="${ctx}/activity/IncomeData/" method="get" class="breadcrumb form-search">
<ul class="ul-form">
<li><label>编号：</label>
<form:input path="activityNo" htmlEscape="false" maxlength="16" class="input-medium"/>
</li>
<li><label>时间：</label>
<input name="beginTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="<fmt:formatDate value="${IncomeData.beginTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
</li>
<li><label>到：</label>
<input name="endTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="<fmt:formatDate value="${IncomeData.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
</li>
<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
<li class="clearfix"></li>
</ul>
</form:form>
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>编号</th>
<th>日期</th>
<th>人数</th>
<th>付费人数</th>
<th>总金额</th>
<th>豪华大礼编号</th>
<th>豪华大礼单价</th>
<th>销售数量</th>
<th>销售金额</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="IncomeData">
<tr>
<td>
${IncomeData.no}
</td>
<td>
${IncomeData.date}
</td>
<td>
${IncomeData.lookCount}
</td>
<td>
${IncomeData.payCount}
</td>
<td>
${IncomeData.totalFee}
</td>
<td>
${IncomeData.packageNum}
</td>
<td>
${IncomeData.price}
</td>
<td>
${IncomeData.soldNum}
</td>
<td>
${IncomeData.soldFee}
</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>一、只合并第一列
<script type="text/javascript">
$(document).ready(function() {
mergeTimeCell();
});
//合并单元格
function mergeTimeCell(){
var sameDayArr=[];
var timeArr=[];
var itemArr=[];
var countArr=[];
var count = 0;
$("tbody").find("tr").each(function(index,item){
var time = $(item).children(":eq(0)").text().trim()
timeArr.push(time)
})
//判断和最后一个tr相同的个数
var lastItemArr =[]
var last =timeArr[timeArr.length-1]
for(var i = 0;i<timeArr.length;i++){
if(last==timeArr[i]){
lastItemArr.push(timeArr[i])
}
}
$("tbody").find("tr").each(function(index,item){
var time = $(item).children(":eq(0)").text().trim()
if(sameDayArr.indexOf(time)==-1){
sameDayArr.push(time)
countArr.push(count+1)
itemArr.push(item)
count=0
}else{
count++
$(item).find("td:eq(0)").remove()
}
})
countArr.push(lastItemArr.length)
for(var i = 0;i<itemArr.length;i++){
$(itemArr[i]).find("td:eq(0)").attr("rowspan",countArr[i+1])
}
}
</script>二、合并多列单元格
<script type="text/javascript">
$(document).ready(function() {
//要合并哪些列（合并多列，列从大到小排列）
var arr =[4,3,2,1,0];
mergeRowCell("contentTable",1,0,arr);
});
/*
MergeTableCell("tableId", 1, 0, 1);
param:tableId,table标签的id
param:startRow,开始行的索引值
param:endRow,结束行的索引值
param:arr,需要处理的列的索引值[这是一个数组]
*/
function mergeRowCell(tableId, startRow, endRow, arr) {
for (var i = 0; i < arr.length; i++) {
MergeTableCell(tableId, startRow, endRow, arr[i]);
}
}
/*
MergeTableCell("tableId", 1, 0, 1);
param:tableId,table标签的id
param:startRow,开始行的索引值
param:endRow,结束行的索引值
param:col,需要处理的列的索引值
*/
function MergeTableCell(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
//设置为0时,检索所有行
if (endRow == 0) {
endRow = tb.rows.length - 1;
}
//指定数据行索引大于表格行数
if (endRow >= tb.rows.length) {
return;
}
//检测指定的列索引是否超出表格列数
if (col >= tb.rows[0].cells.length) {
return;
}
//循环需要判断的数据行
for (var i = startRow; i < endRow; i++) {
//如果当前行与下一行数据值相同，则进行前面列的判断
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
var Same = true;
//循环跟前面的所有的同级数据行进行判断
for (var j = col; j > 0; j--) {
if (tb.rows[startRow].cells[j - 1].innerHTML != tb.rows[i + 1].cells[j - 1].innerHTML) {
Same = false;
break;
}
}
//如果前面的同级数据行的值均相同，则进行单元格的合并
if (true == Same) {
//如果相同则删除下一行的第0列单元格
tb.rows[i + 1].cells[col].style.display = 'none';
//更新rowSpan属性
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
} else {
//增加起始行
startRow = i + 1;
}
} else {
//增加起始行
startRow = i + 1;
}
}
}
</script>