table表格合并第一列中相同的内容!

分享一个简单实用的jquery小插件:

方法一

(仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>

    <table id="table1">
        <tr>
            <td>111td>
            <td>222td>
            <td>333td>
        tr>
        <tr>
            <td>111td>
            <td>555td>
            <td>333td>
        tr>
        <tr>
            <td>111td>
            <td>888td>
            <td>333td>
        tr>
        <tr>
            <td>aaatd>
            <td>bbbtd>
            <td>333td>
        tr>
    table>

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">script>
    <script>

    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() {
      
          $("#table1").rowspan(0);//传入的参数是对应的列数从0开始  第一列合并相同
          // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
       });
    script>

script>
html>

合并前:

table表格合并第一列中相同的内容!_第1张图片

合并后:(根据实际项目需求,只合并第一列)

table表格合并第一列中相同的内容!_第2张图片

实际项目截图:

table表格合并第一列中相同的内容!_第3张图片



方法二

另见网上其他方法:(原生js来实现)

function hb(){ 
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
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
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
tab.rows[j].removeChild(tab.rows[j].cells[col]); 
} 
} 
} 
} 

亲测可用!

总结

:第一种方法,仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用。也就是说,其他页面只需一行代码就可实现该功能。即 $("#table1").rowspan(0);
比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。

你可能感兴趣的:(jquery,jquery,合并,合并表格相同内容,table)