JS合并表格中内容一样的单元格
1.页面效果
2.js代码
function mergeCells() {
var colNumber = tablecontent.rows.item(0).cells.length; //获取表格列数
var rowNumber = tablecontent.rows.length; //获取表格行数
var idStr = "";
//遍历表格中除去表头和第一列中其他的单元格
for (i = 1; i <= colNumber; i++) {
var str = "";
for (j = 1; j < rowNumber; j++) {
//获取单元格内容
var text = $("#tablecontent").find("tr").eq(j).find("td").eq(i).text();
if (text != "") {
//获取内容不为空的单元格的 id
var tdId = $("#tablecontent").find("tr").eq(j).find("td").eq(i).attr("id");
if (str == text ) {
//把内容一样的单元格的id用逗号隔开拼成一个字符串
idStr = idStr + tdId + ",";
//合并单元格
tablecontent.rows[firstRow].cells[i].rowSpan = tablecontent.rows[firstRow].cells[i].rowSpan + 1;
} else {
var firstRow = j;
str = text ;
}
} else {
str = "";
}
}
}
//把拼好的字符串用split()方法转换成没有逗号的数组
var idArray = idStr.split(",");
//遍历数组删除掉id相符的单元格
for (i = 0; i < idArray.length; i++) {
if (idArray[i] != "") {
$("#" + idArray[i]).remove();
}
}
}
3.总体思路
该方法是在数据全部填到对应的单元格之后,或者是从数据库查询的数据全部显示到对应单元格之后,才能调用这个方法。
1.该有内容的单元格已经填入数据。
2.按照遍历完每一列中每一行的方法遍历。
3.当遍历到有数据的单元格时,把单元格的内容赋给一个a变量,当下一个单元格内容为空时,继续遍历,如果不为空就比较它的内容是否和a变量数据一样,如果一样就把单元格合并,并且把id拼到字符串中。
4.全部遍历完之后,需要删除掉的单元格id全部拼到了字符串中。
5.把字符串中的id相符的单元格删除。
一定要注意不能一边合并一边删除,因为随着你删除,列是在变的,所以会导致单元格混乱。