Javascript合并表格中具有相同内容的单元格
程序员文章站
2022-07-13 14:27:47
...
HTML或者JSP的TABLE需要不同行但是内容相同的单元格进行合并,本文以省市县为例,对表格中的省市进行二级合并,具体的页面代码和样式不再展示,主要介绍JS如何实现TABLE的单元格合并(无需第三方库)。
JS代码如下:
Function mergeTable( ){
//默认表格首行为表头,从第二行(index=1)开始合并
var row = 1;
//col=0第一列,col=1第二列
var col = 0;
var provincePos=1;
var cityPos=1;
//上次存储的省份值
var lastProvinceValue = "";
//上次存储的城市值
var lastCityValue = "";
//本次提取的省份值
var provinceValue = "";
//本次提取的城市值
var cityValue = "";
//获取表格Dom节点
var table = document.getElementById("cityList");
//首先判断表格第一行是否有数据(默认第一行没有数据则表格为空,不需要接下来的步骤直接跳出。)
if("" == table.rows[1].cells[0].innerText)
{
//可以直接return,也可以自定义方法。
}else{
//合并省份代码
for(var i=row; i<table.rows.length; i++){
provinceValue = table.rows[i].cells[col].innerText;
cityValue = table.rows[i].cells[col+1].innerText;
if(lastProvinceValue == provinceValue){
//合并城市代码
if(lastCityValue == cityValue){
table.rows[i].deleteCell(col+1);
table.rows[i-cityPos].cells[col+1].rowSpan = table.rows[i-cityPos].cells[col+1].rowSpan+1;
cityPos++;
}else{
lastCityValue = cityValue;
cityPos=1;
}
table.rows[i].deleteCell(col);
table.rows[i-provincePos].cells[col].rowSpan = table.rows[i-provincePos].cells[col].rowSpan+1;
provincePos++;
}else{
lastProvinceValue = provinceValue;
lastCityValue = cityValue;
provincePos=1;
cityPos=1;
}
}
}
}
上述JS代码可以直接放在SCRIPT中检测,同时如果所用的JS框架中列表展示具有回调功能可以放在回调参数中,例如:
"drawCallback":mergeTable()
上述JS代码只是简单的封装TABLE合并单元格,耦合性还较高,希望道友能够共同讨论,抽象出完全解耦的功能函数。