js实现表格table相同列合并

最新推荐文章于 2023-10-30 17:30:48 发布
最新推荐文章于 2023-10-30 17:30:48 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： js 文章标签： js html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
</HEAD> 
<SCRIPT LANGUAGE="JavaScript"> 
function autoRowSpan(tb,row,col) { 
var lastValue=""; 
var value=""; 
var pos=1; 
for(var i=row;i<tb.rows.length;i++){ 
value = tb.rows[i].cells[col].innerText; 
if(lastValue == value){ 
tb.rows[i].deleteCell(col); 
tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1; 
pos++; 
}else{ 
lastValue = value; 
pos=1; 
} 
} 

}

function autoRowSpan1(tb,row,col) { 
var lastValue=""; 
var value=""; 
var pos=1;
var increase = 0;
for(var i=row;i<tb.rows.length;i++){ 
value = tb.rows[i].cells[col].innerText; 
if(lastValue == value){ 
tb.rows[i].deleteCell(col); 
tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1; 
//合并序列行
tb.rows[i].deleteCell(col-1);
tb.rows[i-pos].cells[col-1].rowSpan = tb.rows[i-pos].cells[col-1].rowSpan+1;
pos++; 
}else{ 
lastValue = value; 
pos=1; 
//合并序列行
if(i==1){
tb.rows[1].cells[0].innerText=1;
}else{
increase++;
tb.rows[i].cells[col-1].innerText= parseInt(tb.rows[1].cells[0].innerText)+parseInt(increase);
}
} 
} 

}

</SCRIPT> 
<BODY οnlοad="autoRowSpan1(tb,1,1)"> 
<TABLE id="tb" border="1"> 
<THEAD> 
<TR >
<TD align="center">序号</TD>
<TD>国家</TD> 
<TD>地区</TD> 
</TR> 
</THEAD> 
<TR>
<TD align="center">1</TD>
<TD>中国</TD> 
<TD>河南</TD> 
</TR> 
<TR>
<TD align="center">2</TD>
<TD>中国</TD> 
<TD>四川</TD> 
</TR> 
<TR>
<TD align="center">3</TD>
<TD>中国</TD> 
<TD>北京</TD> 
</TR> 
<TR>
<TD align="center">4</TD>
<TD>美国</TD> 
<TD>纽约</TD> 
</TR> 
<TR>
<TD align="center">5</TD>
<TD>美国</TD> 
<TD>洛杉矶</TD> 
</TR> 
<TR>
<TD align="center">6</TD>
<TD>英国</TD> 
<TD>伦敦</TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 
攻城狮_java
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 实现Table相同行的单元格自动合并示例代码
10-26
Table相同行的单元格自动合并，使用js来实现此效果，具体代码下，感兴趣的朋友可以参考下
js合并表格相同数据列
04-20
测试用例和代码文件 博文链接：https://vectorwind.iteye.com/blog/1894606
JS table 表格相同列合并
wpabbs的专栏
08-21 3767
    function   uniteTable(tb,colLength){     //   检查表格是否规整     if   (!checkTable(tb))   return;     var   i=0;     var   j=0;     var   rowCount=tb.rows.length; //   行数     var   colCount=tb.rows[0].c
js【table】合并行，合并列
weixin_30915951的博客
02-28 830
eg： 1 function hbh() { 2 var tab = document.getElementById("tableID"); 3 var maxCol = 2, val, count, start, qycol = 1, valqy; //maxCol：合并单元格作用到多少列,valqy 为区域列...
使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
weixin_30883311的博客
03-21 686
一、简介 使用js方法对html中的table表格进行单元格的行列合并操作。 网上执行此操作的实例方法有很多，但根据实际业务的区别，大多不适用。 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己业务中的使用。 二、js方法 1 function MergeTableCell(tableId, startRow, endRow, col) { 2 var t...
js实现表格相同数据合并
07-10
相邻表格相同数据看起来不好看，而且显得冗余，如果将相邻表格的相同数据进行合并处理，不仅看起来美观很多，而且显得更加的专业。
JS TABLE CELL 相同内容 单元格 合并
11-14
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能相同的行数更多。例如： 首列 第二列 a b c b c b 总之很不满意，花了一晚上时间写了一下，希望能解决大部分类似问题。
Vue Elenent实现表格相同数据列合并
01-22
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同...
原生JS实现HTML－ TABLE 自动行合并插件
06-30
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...
JStable动态合并相同行
09-02
JS table动态合并相同行,只需传入table名称，js自动合并
表格行列合并JS
01-09
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 //函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。 // 如果为数字，则从最左边第一行为1开始算起。 // "even" 表示偶数行 // "odd" 表示奇数行 // "3n+1" 表示的行数为1、4、7、10....... //参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。 // 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
完美的table单元格合并js
11-24
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
利用js合并table相同内容单元格并js方式自动生成
11-15
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
Javascript合并表格中具有相同内容单元格示例
10-27
表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用Javascript合并，具体示例及效果图如下，感兴趣的朋友可以参考下
Vue实现数据表格合并列rowspan效果
10-16
我们将通过一个具体的示例来说明如何将JSON数据结构转换为具有合并列的表格。 首先，让我们回顾一下HTML实现合并列的方法。在HTML的`<table>`元素中，`<tr>`表示行，`<td>`表示单元格，而`rowspan`属性用于指定...
js实现table同列的合并
prq9110的专栏
01-14 1023
后台传过来list，前端用table展示的时候，合并单元格
＜table＞ 原生表格合并相同列方法
最新发布
weixin_66172196的博客
10-30 361
/该if可以去掉，加上‘region ’是根据‘region ’字段相同的情况下其他字段才能合并，可以根据需求自行修改。// 增加统计和显示隐藏字段。
js合并table表格中一列合并相同内容的单元格
weixin_43667830的博客
06-04 1633
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./jquery-1.7.2.min.js" charset="UTF-8"></script> <style> t
elementui table合并表格第二列相同的数据
06-02
要实现 element-ui table 合并第二列相同的数据，需要使用 `span-method` 属性和 `Table-column` 的 `prop` 属性。 首先，在 `Table` 组件中，使用 `span-method` 属性来定义合并规则： ```html <el-table :data="tableData" :span-method="mergeRows"> ... </el-table> ``` 然后，在 `methods` 中定义合并规则，可以使用 `row` 和 `column` 参数来获取当前单元格的行和列信息，进而判断是否需要合并。 ```javascript methods: { mergeRows(row, column, rowIndex, columnIndex) { if (columnIndex === 1) { // 判断当前列是否为第二列 const rowSpan = this.getRowSpan(row, column, rowIndex, columnIndex); if (rowSpan === 1) { // 如果当前单元格不需要合并，返回 { rowspan: 1, colspan: 1 } return { rowspan: 1, colspan: 1 }; } else { // 如果当前单元格需要合并，返回 { rowspan: rowSpan, colspan: 1 } return { rowspan: rowSpan, colspan: 1 }; } } }, getRowSpan(row, column, rowIndex, columnIndex) { // 获取当前单元格的值 const currentValue = row[column.property]; // 定义合并行数 let rowSpan = 1; // 遍历当前列的上方单元格 for (let i = rowIndex - 1; i >= 0; i--) { const prevRow = this.tableData[i]; // 如果上方单元格的值与当前单元格的值相等，行数加一 if (prevRow[column.property] === currentValue) { rowSpan++; } else { // 如果上方单元格的值与当前单元格的值不相等，停止遍历 break; } } return rowSpan; } } ``` 上面的代码中，`getRowSpan` 方法用来获取当前单元格需要合并的行数，遍历当前列的上方单元格，如果上方单元格的值与当前单元格的值相等，则行数加一。最后，返回合并后的行数。 最后，还需要在第二列的 `Table-column` 中设置 `prop` 属性，表示该列的数据源来自于表格数据中的哪个字段。 ```html <el-table-column label="第二列" prop="column2" /> ``` 这样，就可以实现 element-ui table 合并第二列相同的数据了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值