JavaScript合并网页表格中内容相同的相邻单元格

继续编写“圳品”信息系统，我们已经“圳品”信息读取到JavaScript定义的一个中进行按汉语拼音升序作了排序处理。

var p = [[100, "都安县丙公司", "产品ab", 5, 25, 10],[50, "南丹县a公司", "产品a", 5, 25, 10],[30, "罗城县c公司", "产品a", 5, 25, 10],[100, "都安县乙公司", "产品ac", 5, 25, 10],[50, "南丹县b公司", "产品a", 5, 25, 11],[50, "南丹县a公司", "产品b", 5, 25, 10],[30, "罗城县c公司", "产品b", 5, 25, 10],[50, "南丹县a公司", "产品c", 5, 25, 10],[100, "都安县甲公司", "产品ab", 5, 25, 10]];

详见：

用Javascript对二维数组DIY按汉语拼音的排序方法

现在我们可以将保存在二维数组中的各县（区）“圳品”信息在表格中显示出来。示范如下：

为了直观，我们可以将表格中的来自同一个县（区）的县区代码单元格合并起来，

对于来自同一个企业有多个产品，则将企业名称单元格合并起来。示范如下：

为了实现这些单元格的合并，我们编写了一个函数MergeCells(col)来合并表格中指定列内容相同的上面相邻单元格：

//合并表格中指定列col中内容相同的上下相邻单元格
//Merge adjacent table cells with the same content
function MergeCells(col)
{var t = document.getElementById('tabZp');if (!t || !t.rows){d.innerHTML += '<p>未能访问表格</p>';return;}var cr = t.rows.length;//counts of rowif (cr < 3){d.innerHTML += '<p>表格行数少于3，无需合并</p>';return;}var cc = t.rows[0].cells.length;//counts of columnif (cc==0 || col > cc){d.innerHTML += '<p>表格行数为0或指定列数超出范围</p>';return;}var i, b, c;b=1;//beginfor  (i=2; i < cr; i++){c = t.rows[b].cells[col].innerHTML;    //content//发现内容相同的相邻单元格if (c==t.rows[i].cells[col].innerHTML){//删除内容相同的相邻单元格t.rows[i].removeChild(t.rows[i].cells[col]);            //调整内容相同的首个单元格的rowSpant.rows[b].cells[col].rowSpan++;}else{//发现内容不相同的相邻单元格，开始新的单元格合并b = i;}d.innerHTML += "<p>b="+ b + " i=" + i + " c=" + c;}
} //MergeCells(col)

思路是：

表格首行（第0行）是表头，所以从表格第1行开始进行处理，将行号保存在变量b中，向下逐行将第i行第col列单元格的内容与第b行第col列单元格的内容进行对比：
如果两个单元格内容相同，则用调用removeChild方法删除第i行第col列单元格，然后将第b行第col列单元格的rowSpan值加1；
如果两个单元格内容不同，则将变量b保存的行号更新为当前行（第i行），从当前行（第i行）开始新的单元格对比与合并。

完整的示范代码如下：

<!DOCTYPE html>
<html><style>table    {border-collapse:collapse;}th,td    { border: 1px solid black;}</style>
<body><script>var p = [[100, "都安县丙公司", "产品ab", 5, 25, 10],[50, "南丹县a公司", "产品a", 5, 25, 10],[30, "罗城县c公司", "产品a", 5, 25, 10],[100, "都安县乙公司", "产品ac", 5, 25, 10],[50, "南丹县b公司", "产品a", 5, 25, 11],[50, "南丹县a公司", "产品b", 5, 25, 10],[30, "罗城县c公司", "产品b", 5, 25, 10],[50, "南丹县a公司", "产品c", 5, 25, 10],[100, "都安县甲公司", "产品ab", 5, 25, 10]]; function writeTab(i)
{document.write('<TABLE id="', i, '" align="center"><TR><TH>序号</TH><TH>县区代码</TH><TH>企业名称</TH><TH>产品名称</TH><TH>认证状态</TH><TH>编号</TH><TH>备注</TH></TR>');for (i=0; i <  p.length; i++){document.write('<TR><TD>', i+1,'</TD>');for (j=0; j < p[i].length; j++){document.write('<TD>',p[i][j],'</TD>');    }document.write('</TR>');}document.write('</TABLE>');
}// writeTab(i)document.write('<p style="text-align:center;">初始表格</p>');
writeTab('tabZp0');document.write('<p style="text-align:center;">合并后的表格</p>');
writeTab('tabZp');document.write('<div id="debug"></div>');var d = document.getElementById("debug");
d.innerHTML += "Debug:";//Merge adjacent cells with the same content
function MergeCells(col)
{var t = document.getElementById('tabZp');if (!t || !t.rows){d.innerHTML += '<p>未能访问表格</p>';return;}var cr = t.rows.length;//counts of rowif (cr < 3){d.innerHTML += '<p>表格行数少于3，无需合并</p>';return;}var cc = t.rows[0].cells.length;//counts of columnif (cc==0 || col > cc){d.innerHTML += '<p>表格行数为0或指定列数超出范围</p>';return;}var i, b, c;b=1;//beginfor  (i=2; i < cr; i++){c = t.rows[b].cells[col].innerHTML;    //content//发现内容相同的相邻单元格if (c==t.rows[i].cells[col].innerHTML){//删除内容相同的相邻单元格t.rows[i].removeChild(t.rows[i].cells[col]);            //调整内容相同的首个单元格的rowSpant.rows[b].cells[col].rowSpan++;}else{//发现内容不相同的相邻单元格，开始新的单元格合并b = i;}d.innerHTML += "<p>b="+ b + " i=" + i + " c=" + c;}
} //MergeCells(col)MergeCells(3);
MergeCells(2);
</script></body>
</html>

效果如下图：

需要特别注意的是我们合并表格中多列单元格时的顺序，是按照从右到左的顺序来进行的，先对企业名称列的单元格进行对比和合并，再对县区代码列的单元格进行对比和合并，避免乱套。

JavaScript合并网页表格中内容相同的相邻单元格相关推荐

使用jquery合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
jQuery: 合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码，ONE 已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区地区商品代码商品名称数量有效期至距效期(月) 产品批号规格单位条形码广东深圳 ...
在Excel表格中如何设置字体随单元格大小变化
在Excel表格中如何设置字体随单元格大小变化目录在Excel表格中如何设置字体随单元格大小变化 1.选中单元格,鼠标右键点击"设置单元格式" 2.在"对齐&quo ...
Excel表格中，上下左右键无法移动单元格怎么办？
excel表格中,上下左右键无法移动单元格,要如何才能使用上下左右键移动单元格,操作方法如下. 1.在excel表格中,发现按键盘的上下左右键无法移动单元格了,鼠标始终还是在定位的单元格上,这是不小心 ...
matlab中图显示单元格,excel如何根据表格中的数据自动在单元格中画图：
如何利用matlab根据excel表格里面的数据画图将待的结构的数据录入Excel中,录入意行列要跟原矩阵一一对应录入完以后保存数据,为了后续使用方便,命名时我们最好把它命名为我们接下来在MATL ...
Swift - 可编辑表格样例（可直接编辑单元格中内容、移动删除单元格）
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
谷歌表格_如何计算Google表格中的空白或空单元格
谷歌表格 When you're analyzing data in a spreadsheet, counting empty or blank cells could help you focus ...

JavaScript合并网页表格中内容相同的相邻单元格

JavaScript合并网页表格中内容相同的相邻单元格相关推荐

最新文章

热门文章