zoukankan      html  css  js  c++  java
  • js实现table合并相同列单元格

    /**
    * Created with JetBrains WebStorm.
    * User: Johnny
    * Date: 18-3-26
    * Time: 下午4:48
    * Table td 相同值合并行 要求:
    * 1.table 必须包含tbody,tbody为数据主休
    * 2.table 添加 id="kbdatas"
    * 调用说明:
    * $(function(){
    * mergeRowSpan(4);
    * });
    */
    function uuidStr() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";
    var uuid = s.join("");
    return uuid;
    }

    function merge(icol){
    var tdTxt = "";
    var list_map = new Array();
    var uuid = uuidStr();
    $("#kbdatas").find("tbody tr").each(function(){
    var rmnode = $(this).attr("rmnode");
    if(rmnode==null||rmnode==undefined||rmnode==""){
    rmnode = 0;
    }
    var icolIndex = icol-rmnode;
    var txt = $(this).find("td:eq("+icolIndex+")").text().trim();
    if(tdTxt != txt){
    uuid = uuidStr();
    list_map.push(uuid);
    tdTxt = txt;
    }
    $(this).find("td:eq("+icolIndex+")").attr("tduuid",uuid);
    });
    for(var i = 0; i < list_map.length; i++){
    var tduuid = list_map[i];
    $("#kbdatas").find("td[tduuid='"+tduuid+"']").each(function(index,el){
    var tdlg = $("#kbdatas").find("td[tduuid='"+tduuid+"']").length;
    if(0==index){
    $(el).attr("rowspan",tdlg);
    } else {
    var rmnode = $(el).parent().attr("rmnode");
    if(rmnode==null||rmnode==undefined||rmnode==""){
    rmnode = 1;
    } else {
    rmnode++;
    }
    $(el).parent().attr("rmnode",rmnode);
    $(el).remove();
    }
    });
    }
    }
    function mergeRowSpan(colCount){
    for(var icol = 0; icol < colCount; icol++){ merge(icol); }
    }
  • 相关阅读:
    关于需求转化的事情
    自由邮件的配置
    广告数据关联CS后台数据
    向新同事学习,如何配置邮件
    渠道映射等关系
    机器学习基本概念
    家政业务系统常识
    SAP APO
    SAP Web Dynpro
    SAP Web Dynpro-监视应用程序
  • 原文地址:https://www.cnblogs.com/rey888/p/8674287.html
Copyright © 2011-2022 走看看