JavaScript&JQ 合并table中td下相同的数据

body

<table border="1px;" id="subtable">
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>5</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>6</td>
    			<td>7</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>8</td>
    			<td>9</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>8</td>
    			<td>9</td>
    		</tr>
    		<tr>
    			<td>3</td>
    			<td>8</td>
    			<td>9</td>
    		</tr>
    		<tr>
    			<td>4</td>
    			<td>8</td>
    			<td>9</td>
    		</tr>
    		
    	</table>

我这里分了两种 一种是合并table下的所有td,另一种是合并指定的td

1.合并table下的所有td中相同的数据

$(function(){
  	var tab = document.getElementById("subtable");

     var maxCol = 3, val, count, start;
     var ys="";
      for(var col = maxCol-1; col >= 0 ; col--) { 
      count = 1; 
      val = ""; 
        for(var i=0; i<tab.rows.length; i++){ 
         if(val == tab.rows[i].cells[col].innerHTML){ 
            count++; 
          }else{ 
                  if(count > 1){ 
              //合并 
                start = i - count;
                  if(ys=="#00FFFF"){
                   ys="#EEEE00";
                 }else{
                   ys="#00FFFF";
                 }
                tab.rows[start].cells[col].rowSpan = count;
                tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色
        //        ys="#EEEE00";
        //         tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
                 for(var j=start+1; j<i; j++){ //
                  tab.rows[j].cells[col].style.display = "none";
                  tab.rows[j].removeChild(tab.rows[j].cells[col]);
                   } 
                  count = 1;
                 }
                     val = tab.rows[i].cells[col].innerHTML;
               }
            }
           
               if(count > 1 ){ //合并，最后几行相同的情况下 
                start = i - count; 
                tab.rows[start].cells[col].rowSpan = count;
                    for(var j=start+1; j<i; j++) { 
                     tab.rows[j].removeChild(tab.rows[j].cells[col]);
                    } 
               } 
        }
 		
 		})

2.合并table下指定的td

jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
          return this.each(function(){
             var that;
             $('tr', this).each(function(row) {
                $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                   if (that!=null && $(this).html() == $(that).html()) {
                      rowspan = $(that).attr("rowSpan");
                      if (rowspan == undefined) {
                         $(that).attr("rowSpan",1);
                         rowspan = $(that).attr("rowSpan"); }
                      rowspan = Number(rowspan)+1;
                      $(that).attr("rowSpan",rowspan);
                      $(this).hide();
                   } else {
                      that = this;
                   }
                });
             });
          });
       }
       $(function() {
          $("#subtable").rowspan(0);//传入的参数是对应的列数从0开始  第一列合并相同
          // $("#subtable").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
       });

备注 ：要用到第二种的话必须引入Jq,我这里第一种用到了$(function(){}) 所以也要引入Jq 第一种去掉页面加载的话，就是纯js，所以不用引入Jq就行