1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Javascript合并表格中具有相同内容的单元格

Javascript合并表格中具有相同内容的单元格

时间:2020-08-07 13:09:39

相关推荐

Javascript合并表格中具有相同内容的单元格

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合并单元格,耦合性还较高,希望道友能够共同讨论,抽象出完全解耦的功能函数。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。