精华内容
下载资源
问答
  • 效果图:HTML代码:表格相同内容合并合并前:a12345a12346a2334 b3467 b3567 cc2345 cc2355 d1234 e1234 合并后:a12345a12346a2334 b3467 b3567 cc2345 cc2355 d1234 e1234 JS:function mc(tableId, startRow, endRow...

    效果图:

    f7c13716150874c1e09e145b9abe8e4e.gif 

    HTML代码:

    表格相同内容合并

    合并前:

    a12345
    a12346
    a2334
    b3467
    b3567
    cc2345
    cc2355
    d1234
    e1234

    合并后:

    a12345
    a12346
    a2334
    b3467
    b3567
    cc2345
    cc2355
    d1234
    e1234

    JS:

    function mc(tableId, startRow, endRow, col) {

    var tb = document.getElementById(tableId);

    if (col >= tb.rows[0].cells.length) {

    return;

    }

    if (col == 0) { endRow = tb.rows.length-1; }

    for (var i = startRow; i < endRow; i++) {

    if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {

    tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);

    tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;

    if (i == endRow - 1 && startRow != endRow) {

    mc(tableId, startRow, endRow, col + 1);

    }

    } else {

    mc(tableId, startRow, i + 0, col + 1);

    startRow = i + 1;

    }

    }

    }

    mc('table1',0,0,0);

    展开全文
  • 在jsp、html页面中实现table表格按列合并相同数据行单元格代码,可实现功能为:在一个table表格中,合并指定列中所有相同数据相邻行单元格内容。
  • JStable动态合并相同

    2014-09-02 18:36:06
    JS table动态合并相同行,只需传入table名称,js自动合并
  • 相邻表格相同数据看起来不好看,而且显得冗余,如果将相邻表格的相同数据进行合并处理,不仅看起来美观很多,而且显得更加的专业。
  • JS合并相同单元格

    千次阅读 2018-11-28 22:21:00
    3、判断当前tr和下一行的tr是否相同,如果相同,那么为下一行的tr添加一个class。方便后续删除 4、为当前重复的第一项tr添加rowspan属性 5、删除带有标记的tr 以下是完整的JS代码 // table的id 需要合并的列(从0...

    实现思路:
    1、找出需要合并的列(col)
    2、遍历table中的每一行(tr)。结合列数(col)。进行遍历每一行的tr
    3、判断当前tr和下一行的tr是否相同,如果相同,那么为下一行的tr添加一个class。方便后续删除
    4、为当前重复的第一项tr添加rowspan属性
    5、删除带有标记的tr

    以下是完整的JS代码

    
      // table的id  需要合并的列(从0开始算)
      function mergeCell(tableId, cols) {
        var table = document.getElementById(tableId);
        var table_rows = table.rows;
        // 需要合并的列的数组
        cols.forEach((v, k) => {
          // 循环table每一行
          for (let i = 0; i < table_rows.length - 1; i++) {
            // row
            let now_row = table_rows[i];
            let next_row = table_rows[i + 1];
    
            // col
            let now_col = now_row.cells[v];
            let next_col = next_row.cells[v];
    
            if (now_col.innerHTML == next_col.innerHTML) {
              // 标记为需要删除
              $(next_col).addClass('remove');
              // 递归判断当前对象时候已经被删除
              setParentSpan(table, i, v);
            }
          }
        })
        $(".remove").remove();
      }
    
      // (递归方法,用于多行统计) pram => table表格 当前行 对应的列 
      function setParentSpan(table, row, col) {
        var col_item = table.rows[row].cells[col];
        if ($(col_item).hasClass('remove')) {
          setParentSpan(table, --row, col)
        } else {
          col_item.rowSpan += 1;
        }
      }
    
      // 合并单元格(合并第1、2、3、6、7、8)列
       mergeCell('order_table', [0, 1]);
    

    html则为普通的tr td表格(略)

    为什么会有一个递归方法?
    

    假设现在有3行的数据是相同的,即需要合并单元格

    步骤1:遍历第一行,发现与第二行的数据相同,第二行数据被标记删除,第一行的rowspan+1

    步骤2:遍历第二行,发现第二行数据和第三行数据相同,第三行数据被标记需要删除,与此同时,第二行的rowspan+1

    那么等到删除数据的时候,其实第二行已经被删除。rowspan并不起作用,我们在遍历第二行的时候的rowspan其实需要加到第一行上(即没有被标记的行)。

    那么就需要向上遍历。直到找到没有被标记的行进行rowspan+1。

    所以就有了现在的递归方法


    合并前:
    在这里插入图片描述

    合并后:
    在这里插入图片描述

    因为我在JS中,只控制了合并第1和2行。因为数组是从0开始的,所以在方法中传入的数组是[0,1]

    合并单元格的JS就到这里了


    **THE END**
    
    展开全文
  • 合并前 ``` 房屋编号 房屋名称 房屋状态 设备名称 设备状态 <td>001 <td>A 正常 电视 正常 <td>001 <td>A 正常 冰箱 正常 <td>001 <td>A ...
  • 合并表格 /////////////////////////////////////////////// //功能:合并表格 //参数:tb-需要合并的表格ID //参数:colLength--需要对前几列进行合并,比如, //想合并前两列,后面的数据列忽略合并,colLength...
         合并表格                    
    afor1002001
    afor1003002
    aif1002003
    aif3002304
    aif3202305
                  
    展开全文
  • 测试用例和代码文件 博文链接:https://vectorwind.iteye.com/blog/1894606
  • 先贴出来javascript代码setInterval(function AutoMerge() {if ($('.table tbody tr').eq(0).data('mergetd') == undefined) {var date = '';var start = 0;var end = 0;$('.table tbody tr').each(function(index) ...

    先贴出来javascript代码

    setInterval(function AutoMerge() {

    if ($('.table tbody tr').eq(0).data('mergetd') == undefined) {

    var date = '';

    var start = 0;

    var end = 0;

    $('.table tbody tr').each(function(index) {

    if (date == $(this).find('td').eq(0).html()) {

    end = index;

    } else {

    $('.table tbody tr').eq(start).find('td').eq(0).attr('rowspan', end - start + 1).css({

    'vertical-align': 'middle'

    });

    /*console.log(start + ',' + end + ',' + date); */

    for (var i = start + 1; i <= end; i++) {

    $('.table tbody tr').eq(i).find('td').eq(0).remove();

    };

    start = index;

    end = index;

    }

    date = $(this).find('td').eq(0).html();

    if (index == $('.table tbody tr').size() - 1) {

    $('.table tbody tr').eq(start).find('td').eq(0).attr('rowspan', end - start + 1).css({

    'vertical-align': 'middle'

    });

    for (var i = start + 1; i <= end; i++) {

    $('.table tbody tr').eq(i).find('td').eq(0).remove();

    }

    }

    });

    }

    $('.table tbody tr').eq(0).data('mergetd', 1);

    },

    50);效果图:

    展开全文
  • mergeCell(tableId, cols) { let that = this var table = document.getElementById(tableId);... } }, 调用方法 //DG_All 表格id //[0, 1, 2] 需要合并的列索引,此处合并前三列 this.mergeCell('DG_All', [0, 1, 2])
  • 根据第一列的内容进行合并单元格,相同内容合并 js 第一列的内容不相同,后面的列数相同也不合并 合并之前: ![图片说明](https://img-ask.csdn.net/upload/201801/18/1516253742_151090.png) 合并之后: ![图片...
  • 记录下,按照自己的思维流程写的代码,难免有冗余和不合理的地方,着急要用,也懒得优化,适用于有合并前两列中相同内容单元格需求的地方。如有有人能受到启发写出更加好用完美的代码,那我会感到非常高兴。 ...
  • <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...script type="text/javascript" src="./jquery-1.7.2.min.js" charset="UTF-8"></script> <style> t
  • * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同合并行 要求: * 1.table 必须包含tbody,tbody为数据主休 * 2.table 添加 id="kbdatas" * 调用说明: * $(function(){ * ...
  • 利用js合并table相同内容单元格并js方式自动生成,把文本内容复制进js中,应该就知道大概咋用了
  • js合并相同内容表格行

    千次阅读 2016-07-28 16:51:23
    js获取查询下参数 function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); ...
  • // 遍历集合数据,产生数据行 Iterator[]> it = dataset.iterator(); int index = 0; while (it.hasNext()) { index++; row = sheet.createRow(index); String[] dataSources = it.next() ; for (int...
  • js数组中相同对象合并该对象中不同字段 //数据,水果名称相同的,把数量累加合并起来,根据id是否相同判断 var data =[ { id:'5ec223ec306f2300017aa7d4', fruitName:'苹果', num:100, price:30 }, { id:'5ec4...
  • JS合并单元格、JavaScript单元格合并

    千次阅读 2011-11-09 20:55:29
    合并表格     ///////////////////////////////////////////////   //功能:合并表格   //参数:tb-需要合并的... //想合并前两列,后面的数据列忽略合并,colLength应为2   //缺省表示对全部列合并
  • js数组对象相同合并处理 平时工作中会经常遇到数据处理,其中数组合并处理也会经常遇到,下面就是数组相同合并的一种方式: 1.首先由原始的数组arr数据, 2.然后创建一个map空对象和一个dest空数组,通过判断map...
  • 将数组里某个属性相同的对象合并成一个数组原数组如下需求是,转成如下数组以下是解决方案 原数组如下 let resData = [ { "name": "住院医疗最高报销", "tagName": "医疗", "insuredAmount": "6000" }, { ...
  • ; charset=gb2312"> 合并表格 window.onload = function () { init(table1, 6); }
  • [ { id: 0, province: '江苏', child: [ { city_id: 1,city_name: '南京',province: '江苏' }, { city_id: 2,city_name: '苏州',province: '江苏' }, { city_id: 3,city_name: '扬州',province: '江苏' } ...
  • 表格相同内容合并 title > < script type = "text/javascript" > window.onload = function () { var tab=document.getElementById(table1); var maxCol= 6 ,val, count, start; //maxCol:...
  • 今天小编就为大家分享一篇vue实现将一个数组内的相同数据进行合并,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 127,645
精华内容 51,058
关键字:

如何合并相同的数据js