js 表格指定列，根据相同值实现跨行合并
1.情景展示
跨行合并，如何实现？
2.实现方式
/**
* 表格指定列，根据相同值跨行
* @param tableId
* 表格ID
* @param columnNum
* 要合并的列数（第几列）
* @explain 第一行不参与跨行合并
*/
function mergeTableRows(tableId, columnNum) {
var tableObj = document.getElementById(tableId);
// 列数所对应的下标数
var colIdx = columnNum - 1;
var lastTdText = null;
var rowLen = tableObj.rows.length;
for (var i = rowLen - 1; i >= 1; i--) {
var currText = tableObj.rows[i].cells[colIdx].innerHTML;
if (lastTdText == null) {
sameCount = 1;
} else if (lastTdText != currText) {
if (sameCount > 1) {
tableObj.rows[i + 1].cells[colIdx].rowSpan = sameCount;
}
sameCount = 1;
} else if (lastTdText == currText) {
tableObj.rows[i + 1].deleteCell(colIdx);
sameCount++;
}
lastTdText = currText;
}
if (sameCount > 1) {
tableObj.rows[1].cells[colIdx].rowSpan = sameCount;
}
};
合并第二列
window.onload = function(){
mergeTableRows('tab',2);
}
合并第三列
window.onload = function(){
mergeTableRows('tab',3);
}
说明：
该函数只能对第一行以外的行进行合并，也就是说第一行不参与合并，也无法合并；
该函数只能对table的某一列进行合并，也就是说该函数只能合并一列，即使调用多次。
3.拓展
<table id="evalTable" style="width: 100%;" border="1" cellspacing="0" cellpadding="0"> <thead> <tr><th align="center" colspan="7">医共体运行评价指标</th> </tr></thead> <tbody> <tr> <td align="center" class="eval_td index_td" bgcolor="#f3f5ff">一级指标分类</td> <td align="center" class="eval_td index_td" bgcolor="#f3f5ff">总权重（%）</td> <td align="center" class="eval_td index_td" bgcolor="#01bda3">二级指标名称</td> <td align="center" class="eval_td index_td" bgcolor="#e5fffb">分值</td> <td align="center" class="eval_td index_td" bgcolor="#e5fffb">得分</td> <td align="center" class="eval_td index_td" bgcolor="#e5fffb">计算方法</td> <td align="center" class="eval_td index_td" bgcolor="#e5fffb">备注</td> </tr> <!-- 第1个一级指标&对应的二级指标 --> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">参保率</td> <td class="index_td">5</td> <td class="index_td"> <!-- 二级指标ID --> <input name="INDEXB_ID" type="hidden" value="1" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="1" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每下降1%，扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">基金按时支付情况</td> <td class="index_td">5</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="2" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="1" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">按月预付给医共体，延迟1个月，扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">医共体基金使用率（%）</td> <td class="index_td">40</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="3" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="2" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">80-90%之间为正常，超过1%扣1分，低于1%扣0.5分,扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">受益情况</td> <td class="index_td"></td> <td class="index_td"> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">住院率</td> <td class="index_td">5</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="5" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="1" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">次均住院费用</td> <td class="index_td">5</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="6" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="1" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出5%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">实际补偿化</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="7" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="2" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">县外就诊率占比</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="8" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="2" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣3分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">县外就诊费用占比</td> <td class="index_td">13</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="9" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="2" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣3分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">县乡住院费用比</td> <td class="index_td">5</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="10" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="1" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="40"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">县乡住院人次比</td> <td class="index_td">2</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="11" oldClass=""> <input name="SCORE" class="index_text index_1" required="required" type="text" maxlength="1" oldClass="index_text index_1" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr index_sum" totalweight="40" currentrowindex="11"> <td align="center" class="index_td">医保运行</td> <td align="center" class="index_td">40</td> <td class="index_td">医保运行合计</td> <td class="index_td">100</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="12" oldClass=""> <input name="SCORE" type="hidden" value="0" oldClass=""> <span class="sum_show" id="score_1">0</span> <input class="first_index_id" type="hidden" value="1" oldClass="first_index_id"> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">医疗服务能力</td> <td align="center" class="index_td">20</td> <td class="index_td">150种疾病占比</td> <td class="index_td">50</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="13" oldClass=""> <input name="SCORE" class="index_text index_2" required="required" type="text" maxlength="2" oldClass="index_text index_2" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">医疗服务能力</td> <td align="center" class="index_td">20</td> <td class="index_td">75种疾病占比</td> <td class="index_td">30</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="14" oldClass=""> <input name="SCORE" class="index_text index_2" required="required" type="text" maxlength="2" oldClass="index_text index_2" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">医疗服务能力</td> <td align="center" class="index_td">20</td> <td class="index_td">DRG排名</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="15" oldClass=""> <input name="SCORE" class="index_text index_2" required="required" type="text" maxlength="2" oldClass="index_text index_2" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">医疗服务能力</td> <td align="center" class="index_td">20</td> <td class="index_td">手术例数占比</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="16" oldClass=""> <input name="SCORE" class="index_text index_2" required="required" type="text" maxlength="2" oldClass="index_text index_2" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每高出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr index_sum" totalweight="20" currentrowindex="16"> <td align="center" class="index_td">医疗服务能力</td> <td align="center" class="index_td">20</td> <td class="index_td">医疗服务合计</td> <td class="index_td">100</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="17" oldClass=""> <input name="SCORE" type="hidden" value="0" oldClass=""> <span class="sum_show" id="score_2"></span> <input class="first_index_id" type="hidden" value="2" oldClass="first_index_id"> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">高血压管理率</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="18" oldClass=""> <input name="SCORE" class="index_text index_3" required="required" type="text" maxlength="2" oldClass="index_text index_3" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">高血压控制率</td> <td class="index_td">15</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="19" oldClass=""> <input name="SCORE" class="index_text index_3" required="required" type="text" maxlength="2" oldClass="index_text index_3" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">糖尿病管理率</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="20" oldClass=""> <input name="SCORE" class="index_text index_3" required="required" type="text" maxlength="2" oldClass="index_text index_3" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">糖尿病控制率</td> <td class="index_td">15</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="21" oldClass=""> <input name="SCORE" class="index_text index_3" required="required" type="text" maxlength="2" oldClass="index_text index_3" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">公卫经费按时拨付情况</td> <td class="index_td">10</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="22" oldClass=""> <input name="SCORE" class="index_text index_3" required="required" type="text" maxlength="2" oldClass="index_text index_3" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">按月拨付，延迟1个月，扣5分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="20"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">公卫定期考核得分</td> <td class="index_td">40</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="23" oldClass=""> <input name="SCORE" class="index_text index_3" required="required" type="text" maxlength="2" oldClass="index_text index_3" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣1分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr index_sum" totalweight="20" currentrowindex="23"> <td align="center" class="index_td">公卫</td> <td align="center" class="index_td">20</td> <td class="index_td">公卫合计</td> <td class="index_td">100</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="24" oldClass=""> <input name="SCORE" type="hidden" value="0" oldClass=""> <span class="sum_show" id="score_3"></span> <input class="first_index_id" type="hidden" value="3" oldClass="first_index_id"> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="10"> <td align="center" class="index_td">满意度</td> <td align="center" class="index_td">10</td> <td class="index_td">居民综合满意度</td> <td class="index_td">60</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="25" oldClass=""> <input name="SCORE" class="index_text index_4" required="required" type="text" maxlength="2" oldClass="index_text index_4" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="10"> <td align="center" class="index_td">满意度</td> <td align="center" class="index_td">10</td> <td class="index_td">基层医务人员满意度</td> <td class="index_td">40</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="26" oldClass=""> <input name="SCORE" class="index_text index_4" required="required" type="text" maxlength="2" oldClass="index_text index_4" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">与全省平均值比较，每低出1%扣2分，扣完为止</td> <td class="index_td"></td> </tr> <tr class="index_tr index_sum" totalweight="10" currentrowindex="26"> <td align="center" class="index_td">满意度</td> <td align="center" class="index_td">10</td> <td class="index_td">满意度合计</td> <td class="index_td">100</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="27" oldClass=""> <input name="SCORE" type="hidden" value="0" oldClass=""> <span class="sum_show" id="score_4"></span> <input class="first_index_id" type="hidden" value="4" oldClass="first_index_id"> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="10"> <td align="center" class="index_td">信息化</td> <td align="center" class="index_td">10</td> <td class="index_td">与全民健康信息平台区域信息协同互通共享和业务统计及按各级要求统计分析</td> <td class="index_td">30</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="28" oldClass=""> <input name="SCORE" class="index_text index_5" required="required" type="text" maxlength="2" oldClass="index_text index_5" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="10"> <td align="center" class="index_td">信息化</td> <td align="center" class="index_td">10</td> <td class="index_td">医共体信息协同共享，满足日常业务需要和业务统计及各级要求统计</td> <td class="index_td">30</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="29" oldClass=""> <input name="SCORE" class="index_text index_5" required="required" type="text" maxlength="2" oldClass="index_text index_5" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td">实现医共体内外业务协同、电子病历及健康档案互联互通</td> <td class="index_td"></td> </tr> <tr class="index_tr " totalweight="10"> <td align="center" class="index_td">信息化</td> <td align="center" class="index_td">10</td> <td class="index_td">与统计调查制度规范统计，健康中国指标及大数据阶段统计和预警分析</td> <td class="index_td">40</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="30" oldClass=""> <input name="SCORE" class="index_text index_5" required="required" type="text" maxlength="2" oldClass="index_text index_5" datatype="number"><span style="color: red;">*</span> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> <tr class="index_tr index_sum" totalweight="10" currentrowindex="30"> <td align="center" class="index_td">信息化</td> <td align="center" class="index_td">10</td> <td class="index_td">信息化合计</td> <td class="index_td">100</td> <td class="index_td"> <input name="INDEXB_ID" type="hidden" value="31" oldClass=""> <input name="SCORE" type="hidden" value="0" oldClass=""> <span class="sum_show" id="score_5"></span> <input class="first_index_id" type="hidden" value="5" oldClass="first_index_id"> </td> <td class="index_td"></td> <td class="index_td"></td> </tr> </tbody> <tfoot> <tr> <td align="center" class="ActionBar index_td" id="ActionBar" colspan="7"> <input class="Button" id="SaveButton" onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'" onclick="javascript:zbtbSave.onSave();" type="button" value=" 保 存 " oldClass="Button"> <input class="Button" onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'" onclick="javascript:zbtbSave.onCancel();" type="reset" value=" 重 置" oldClass="Button"> </td> </tr> </tfoot> </table>
如上图所示，table数据是从数据库查出来，动态加载出来的，如何实现前两列的跨行合并？
var row_index_array = [];
$('tr.index_sum').each(function(){
var currentRowIndex = $(this).attr('currentRowIndex');
row_index_array.push(currentRowIndex);
});
// 合并第一列
var startIndex = 0;
for (var i = 0; i < row_index_array.length; i++) {
let difference = row_index_array[i] - startIndex;
let k;
if (i ==0) {
k = startIndex + 2;
for (var j = 0; j < difference; j++) {
// 删除第一个单元格
$('#evalTable tbody tr')[k].deleteCell(0);
k++;
}
// 跨行合并单元格
$('#evalTable tbody tr')[startIndex + 1].cells[0].rowSpan = difference + 1;
} else {
k = parseInt(startIndex) + 3;
for (var j = 0; j < difference - 1; j++) {
// 删除第一个单元格
$('#evalTable tbody tr')[k].deleteCell(0);
k++;
}
$('#evalTable tbody tr')[startIndex + 2].cells[0].rowSpan = difference;
}
startIndex = parseInt(row_index_array[i]);
}
// 合并第二列
startIndex = 0;
for (var i = 0; i < row_index_array.length; i++) {
let difference = row_index_array[i] - startIndex;
let k;
if (i ==0) {
k = startIndex + 2;
for (var j = 0; j < difference; j++) {
// 因为第一列已经被合并，所以，删除第二列的单元格时，也是删除第一个单元格
$('#evalTable tbody tr')[k].deleteCell(0);
k++;
}
$('#evalTable tbody tr')[startIndex + 1].cells[1].rowSpan = difference + 1;
} else {
k = parseInt(startIndex) + 3;
for (var j = 0; j < difference - 1; j++) {
$('#evalTable tbody tr')[k].deleteCell(0);
k++;
}
$('#evalTable tbody tr')[startIndex + 2].cells[1].rowSpan = difference;
}
startIndex = parseInt(row_index_array[i]);
}
说明两点
第一，跨行合并后，需要删除被合并的单元格；
第二，跨行合并后，被合并列的右侧的列数元素下标等于被删除列的元素下标。也就是，第三行第一列被删出后，第二列的元素下标就成了0。
效果展示
本文来自博客园，作者：Marydon，转载请注明原文链接：https://www.cnblogs.com/Marydon20170307/p/12788248.html
浙公网安备 33010602011771号