jquery實現行和列分步單元格合併

//-----------上下單元格合併--------------------

 jQuery.fn.rowspan = function(colIdx) {

 return this.each(function(){

  var that;

  $('tr', this).each(function(row) {

  $('td:eq('+colIdx+')', this).each(function(col) {

      if ($(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); // do your action for the colspan cell here

        $(this).hide(); // .remove(); // do your action for the old cell here

      } else {

        that = this;

      }

      that = (that == null) ? this : that; // set the that if not already set

  });

 });

 });

}

//-----------左右單元格合併--------------------

jQuery.fn.colspan = function(rowIdx) {

 return this.each(function(){

  var that;

  $('tr', this).filter(":eq("+rowIdx+")").each(function(row) {

  $(this).find('td').each(function(col) {

 /*  alert($(this).text()!=""); */

      if ($(this).html() == $(that).html()) {

        colspan = $(that).attr("colSpan");

        if (colspan == undefined) {

          $(that).attr("colSpan",1);

          colspan = $(that).attr("colSpan");

        }

        colspan = Number(colspan)+1;

        $(that).attr("colSpan",colspan);

        $(this).hide(); // .remove();

      } else {

        that = this;

      }

      that = (that == null) ? this : that; // set the that if not already set

  });

 });

 });

 }

 $(function(){

$('.tb tbody tr').each(function(row) {

   $('.tb').colspan(row);

 });

 $('.tb tbody tr').each(function(col) {

   $('.tb').rowspan(col);

 });

});

<table id="spdata" class="tb">

  <thead>

                    <tr>

                        <th>星期</th>

                        <th>實驗室</th>

                        <c:forEach items="${classMap}" var="current"  varStatus="i">

                        <th id="class_${current.key}">${current.value}</th>

                       </c:forEach>

                    </tr>

                </thead>

                <tbody>

                <c:forEach items="${labClassWeekdays}" var="current"  varStatus="i">

                        <tr>

                            <td>${current.weekdayName}</td>

                            <td>${current.labName}</td>

                            <c:forEach items="${classMap}" var="cur"  varStatus="k">

                        <td>  <c:forEach items="${labWeekdays}" var="lab" varStatus="j"><c:if test="${lab.weekdayId==current.weekdayId&&lab.labId==current.labId&&lab.classId==cur.key}">${lab.appointName}</c:if></c:forEach></td>

                           </c:forEach>

                        </tr>

                        </c:forEach>

                </tbody>

</table>

這個兩個方法能夠實現table中空格不多的上下左右單元格合併，若是其中空格不少的話就會出現錯亂，多出一列，例如採用上述代碼產生的表格裏面有不少的空格，採用這種合併表格的方法就會出現以下圖的效果：

所以，我在jsp代碼作了以下操做讓每一個空的單元格里面隱藏一段不同的代碼如紅色的代碼

<table id="spdata" class="tb">

  <thead>

                    <tr>

                        <th>星期</th>

                        <th>實驗室</th>

                        <c:forEach items="${classMap}" var="current"  varStatus="i">

                        <th id="class_${current.key}">${current.value}</th>

                       </c:forEach>

                    </tr>

                </thead>

                <tbody>

                <c:forEach items="${labClassWeekdays}" var="current"  varStatus="i">

                        <tr>

                            <td>${current.weekdayName}</td>

                            <td><div title="${current.memo}" class="wenben">${current.labName}</div></td>

                            <c:forEach items="${classMap}" var="cur"  varStatus="k">

                            <c:set var="labHours" scope="session" value="false"/><c:set var="courses" scope="session" value=""/><c:set var="courseDetails" scope="session" value=""/>

                        <c:forEach items="${labWeekdays}" var="lab" varStatus="j"><c:if test="${lab.weekdayId==current.weekdayId&&lab.labId==current.labId&&lab.classId==cur.key}"><c:set var="labHours" value="true"/><c:set var="courses" value="${lab.appointName}"/><c:set var="courseDetails" value="${lab.memo}"/></c:if></c:forEach>

                            <c:choose><c:when test="${labHours}"><td style="background-color: red"><div title="${courseDetails}" class="wenben">${courses}</div> <c:set var="labHours" value="false"/><c:set var="courses" value=""/><c:set var="courseDetails" scope="session" value=""/></td></c:when><c:otherwise><td> <div style="display:none">appoint_${current.weekdayId}_${current.labId}_${cur.key}</div></td></c:otherwise></c:choose>

                           </c:forEach>

                             </tr>

                        </c:forEach>

                </tbody>

</table>

就能夠達到同時合併上下左右的單元格了

效果以下：