合并思路如下:
1、根据单元格内容或单元格属性找出需要合并的单元格
2、修改起始单元格colspan值
3、删除多余的单元格
单元格合并代码如下:
/************************************* table单元格合并 ***********************************************
合并指定table 指定列 相同数据的单元格 table:table对象 colInx:需要合并的列的index columns:table总列数
opts:{columns:总列数,skipNull:是否忽略空单元格的合并 mergeAttrName }
**********************************************************************************************/
mergeTalbeVCells = function(table,colInx,opts){
var option = {skipNull:false};
$.extend(option,opts);
var cols = option.columns || table.rows[0].cells.length;
var colArr = [];
var rows = table.rows.length;
var n = 1;
for(var i=0;i<rows;i++){
var currtxt = '';
if(option.mergeAttrName){
currtxt = table.rows[i].cells[colInx - (cols - table.rows[i].cells.length)].getAttribute(option.mergeAttrName);
}else{
currtxt = table.rows[i].cells[colInx - (cols - table.rows[i].cells.length)].innerText;
}
var nexttxt;
if(i < rows-1){
if(option.mergeAttrName){
nexttxt = table.rows[i+1].cells[colInx - (cols - table.rows[i+1].cells.length)].getAttribute(option.mergeAttrName);
}else{
nexttxt = table.rows[i+1].cells[colInx - (cols - table.rows[i+1].cells.length)].innerText;
}
}else{
colArr[colArr.length] = {rowInx:((i+1)-n),rowSpan:n};
}
if(currtxt != nexttxt){
colArr[colArr.length] = {rowInx:(i-n+1),rowSpan:n};
n = 0;
}else if(currtxt=="" && nexttxt==""){
// 是否忽略空字符
if(option.skipNull){
colArr[colArr.length] = {rowInx:0,rowSpan:1};
n = 0;
}
}
n++;
}
// 合并相同数据的单元格
for(var i=0;i<colArr.length;i++){
table.rows[colArr[i].rowInx].cells[colInx - (cols - table.rows[colArr[i].rowInx].cells.length)].rowSpan = colArr[i].rowSpan;
for(var j=1;j<colArr[i].rowSpan;j++){
table.rows[colArr[i].rowInx*1+j].deleteCell(colInx - (cols - table.rows[colArr[i].rowInx*1+j].cells.length));
}
}
}
还原合并代码如下:
/******* 还原合并 *******/
var restoreMergeTable = function(table,colInx,opts){
var option = {skipNull:false};
$.extend(option,opts);
var cols = option.columns || table.rows[0].cells.length;
var colArr = [];
var rows = table.rows.length;
var n = 1;
for(var i=0;i<rows;i++){
var cell = getCellByColInx(table.rows[i],colInx);
if(!cell) continue;
var rowSpan = cell.getAttribute("rowSpan");
if(rowSpan<2) continue;
for(var ri=1;ri<rowSpan;ri++){
copyCell(table.rows[i+ri].insertCell(0),cell,_this.option.userDatas);
}
cell.rowSpan = 1;
}
/************** 复制单元格 **************/
function copyCell(res_cell,target_cell,attributes){
res_cell.innerHTML = target_cell.innerHTML;
if(attributes){
for(var i=0,len=attributes.length;i<len;i++){
res_cell.setAttribute(attributes[i],target_cell.getAttribute(attributes[i]));
}
}
res_cell.setAttribute("columnId",target_cell.getAttribute("columnId"));
}
}
分享到:
相关推荐
2. `rowspan`属性:这个属性用于指定一个单元格纵向跨越的行数。例如,`<td rowspan="2">`表示该单元格将占据两行的高度。 当处理动态生成的数据时,比如从服务器获取的列表数据,可能需要在JavaScript中动态设置`...
在表格合并的场景下,你可能需要用到CSS的`display: table`、`display: table-cell`等属性来布局表格,同时设置单元格的宽度、高度以及边框等样式。对于合并的单元格,可能需要设置特殊的样式,比如隐藏不需要显示的...
2. rowspan属性:同样,`rowspan`属性则表示该单元格纵向跨越的行数。例如,`rowspan="2"`表示该单元格将占用2行的空间。 三、实例分析 在"合并table的单元格"示例中,我们可以看到以下两种合并方法的应用: 1. ...
`colspan`定义了单元格横向合并的列数,而`rowspan`则定义了纵向合并的行数。例如: ```html <table> 这是合并两列的单元格 这是合并两行的单元格 正常单元格 正常单元格 </table> ``` 在这个例子...
`colspan`定义了单元格横向跨越的列数,而`rowspan`则定义了单元格纵向跨越的行数。下面将详细解释如何在JSP中实现这个功能。 1. **HTML基础**: 在JSP中,我们首先需要创建一个HTML表格结构,包括`<table>`、`...
我们可以通过改变td的rowspan属性来实现横向合并,或者改变td的colspan属性来实现纵向合并。在本例中,我们将关注如何通过js实现横向合并相同内容的单元格。 我们可以通过以下步骤来实现: 1. 首先,确定需要处理...
单元格合并通常通过`colspan`和`rowspan`属性实现,`colspan`用于横向合并单元格,而`rowspan`用于纵向合并单元格。 #### 三、JQuery遍历表格和处理单元格 在示例代码中,通过`$("#tbl").find("tr")`获取表格中...
例如,`colspan="3"`将一个单元格横向合并为3列,`rowspan="2"`则将单元格纵向合并为2行。 最后,我们提到了链接标签`<a>`,用于创建超链接。`href`属性指定链接的目标地址,`target`定义打开链接的方式(默认在原...
`conbainTableRow`方法用于纵向合并内容相同的单元格,传入的是表格对象以及需要合并的列数。此外,还有一个可选参数用于指定从哪一行开始合并。而`combineCell`方法则是用于横向合并单元格,它需要一个单元格对象...
通过`<table>`标签和`<tr>`、`<td>`标签构建棋盘,使用CSS设置样式以达到视觉效果。 二、CSS美化 CSS用于定义页面样式,使游戏界面更美观。通过设置棋盘单元格的宽高、边框、背景色等属性,可以创建出清晰的棋盘...
HTML标记语言用于定义页面内容和结构,如棋盘的表格元素 `<table>` 和棋子图片的 `<img>` 标签。 3. **CSS样式**:虽然源代码中没有明确提到CSS文件,但通常HTML页面会结合CSS来设定元素样式,如棋盘的大小、颜色,...
通常,我们会使用`<table>`元素来创建一个棋盘网格,每个单元格(`<td>`)代表棋盘上的一个位置。棋盘大小一般设定为15x15,可以通过CSS设置样式以适应不同屏幕尺寸。 三、JavaScript实现棋盘 1. 数据结构:为了...
根据给定的文件信息,我们来详细解析如何通过JavaScript和CSS实现一个表格中行间隔显示不同颜色,并且能够对鼠标悬停的行实现高亮显示的效果。这在网页中是一种常见的交互效果,可以使表格数据更加易于阅读和区分。 ...
- `rowspan`: 单元格纵向合并。 - 表格嵌套: `<table>` 标签可以嵌套使用。 **1.7 表单** - `<form>` 标签定义表单容器。 - `<input>` 标签创建不同的输入控件。 - `type` 属性定义控件类型: - `text`: 文本...
- 在JavaScript中,根据位置更新二维数组,将该格子标记为当前玩家的棋子颜色(如1或-1,分别代表黑棋和白棋)。 3. **游戏逻辑**: - 检查每次下棋后,是否有玩家形成五子连线。 - 这需要遍历所有可能的方向...
在JavaScript中,我们可以利用DOM(Document Object Model)来操作HTML元素,包括表格的行(tr)和单元格(td)。以下是一个简单的步骤来实现这个功能: 1. **获取表格元素**:首先,我们需要找到页面上的表格元素...
`<tr>`创建一个新的表格行,`<td>`和`<th>`用于创建单元格。 11. `<a href=URL target=_self>` 表示在本窗口打开超链接,对应D选项。`_self`表示链接会在当前窗口或框架中打开。 12. `Math.random()` 函数在...
表格标记的基本结构是`<table></table>`,它包含了表格的行`<tr></tr>`、单元格`<td></td>`和表头单元格`<th></th>`等元素。问题8和22的答案都是C。 在HTML代码中,`<a href=URL target=_self>`表示在当前窗口或...