合并表格中临近行相同的值

最新推荐文章于 2024-07-11 22:36:37 发布

王洪让

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量288

点赞数

文章标签： jquery 表格合并 html js

本文链接：https://blog.csdn.net/u010482584/article/details/40041989

版权

在页面进行数据展示时，经常遇到要合并相同行的问题，例如：

A(学生姓名) B（课程）

张三英语

李四数学

李四语文

李四理论力学

王五基本力学

王五量子力学

张三热力学

现在我们需要将学生姓名临近相同的进行合并，可以这样通过jquery来实现（注：我的项目中jquery对象名称是不用加$的）：

$(function(){
   var name=$("table tr td.1");//获取td数组jquery对象
  cols(name);
});

//合并某一值相同行方法
function cols(tds){
var combine =0;//要合并的列
var index1 =1;//合并的列数
var eq='';//用于临近两行的判断值是否相等
for(var a=0;a<tds.length;a++){
  if(a==0){
   eq=$(tds[a]).text();
  }else{
   //关键
   if(eq==$(tds[a]).text()){
    combine=a-index1;//获取要合并的列
    index1++;//增加合并行
   }else{
    //设置要合并列的值
    if(combine==-1){//即未经过if赋值
     combine=a-1;
    }
    //操作table
    $(tds[combine]).attr("rowspan",index1);
    for(var b=1;b<index1;b++){
     $(tds[combine+b]).remove();
    }

    index1=1;//重置合并行值
    combine=-1;//重置要合并的列
    eq=$(tds[a]).text();//重置eq往下判断
   }
   //当数据到结尾时将最后一次的判断合并，因else中的方法不一定执行
   if(a==tds.length-1){
    $(tds[combine]).attr("rowspan",index1);
    for(var b=1;b<index1;b++){
     $(tds[combine+b]).remove();
    }
   }
  }
}
}