jQuery Table 欄位合併

jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法

////合併上下欄位(colIdx)
jQuery.fn.rowspan = function(colIdx) {
    return this.each(function() {
        var that;
        $('tr', this).each(function(row) {
            var thisRow = $('td:eq(' + colIdx + '),th:eq(' + colIdx + ')', this);
            if ((that != null) && ($(thisRow).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);             
                $(thisRow).remove(); ////$(thisRow).hide();
            } else {
                that = thisRow;
            }
            that = (that == null) ? thisRow : that; 
        });
        alert('1');
    });
}

////當指定欄位(colDepend)值相同時，才合併欄位(colIdx)
jQuery.fn.rowspan = function(colIdx, colDepend) {
    return this.each(function() {
        var that;
        var depend;
        $('tr', this).each(function(row) {
            var thisRow = $('td:eq(' + colIdx + '),th:eq(' + colIdx + ')', this);
            var dependCol = $('td:eq(' + colDepend + '),th:eq(' + colDepend + ')', this);
            if ((that != null) && (depend != null) && ($(thisRow).html() == $(that).html()) && ($(depend).html() == $(dependCol).html())) {
                rowspan = $(that).attr("rowSpan");
                if (rowspan == undefined) {
                    $(that).attr("rowSpan", 1);
                    rowspan = $(that).attr("rowSpan");
                }
                rowspan = Number(rowspan) + 1;
                $(that).attr("rowSpan", rowspan);
                $(thisRow).remove(); ////$(thisRow).hide();
                
            } else {
                that = thisRow;
                depend = dependCol;
            }
            that = (that == null) ? thisRow : that;
            depend = (depend == null) ? dependCol : depend;
        });
    });
}

////合併左右欄位
jQuery.fn.colspan = function(rowIdx) {
    return this.each(function() {
        var that;
        $('tr', this).filter(":eq(" + rowIdx + ")").each(function(row) {
            $(this).find('th,td').each(function(col) {
                if ((that != null) && ($(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).remove(); 
                } else {
                    that = this;
                }
                that = (that == null) ? this : that; 
            });
        });
    });
}

CODE-以jQuery實現Table相同欄位的上下合併

<script type="text/javascript">
        $(function () {
            //模擬顯示資料
            var data =
            [
                { No: "1", Name: "Jeffrey", Date: "2011/05/07", Score: 2011 },
                { No: "1", Name: "Jeffrey", Date: "2011/06/21", Score: 9999 },
                { No: "1", Name: "Jeffrey", Date: "2011/06/22", Score: 32767 },
                { No: "2", Name: "Mulder", Date: "2011/06/01", Score: 999 },
                { No: "3", Name: "Darkthread", Date: "2011/06/10", Score: 100 },
                { No: "3", Name: "Darkthread", Date: "2011/06/15", Score: 100 }
            ];
            var h = [];
            for (var i = 0; i < data.length; i++) {
                h.push("<tr>");
                var obj = data[i];
                for (var p in obj)
                    h.push("<td class='c-" + p + "'>" + obj[p] + "</td>");
                h.push("</tr>");
            }
            $("#scoreboard tbody").html(h.join('\n'));
 
            //合併內容相同欄位的邏輯
            $("#btnShowMe").click(function () {
                var $lastCell = null;
                var mergeCellSelector = ".c-No,.c-Name";
                $("#scoreboard tbody td.c-No").each(function () {
                    //跟上列的td.c-No比較，是否相同
                    if ($lastCell && $lastCell.text() == $(this).text()) {
                        //取得上一列，將要合併欄位的rowspan + 1
                        $lastCell.closest("tr").children(mergeCellSelector)
                        .each(function () {
                            this.rowSpan = (this.rowSpan || 1) + 1;
                        });
                        //將本列被合併的欄位移除
                        $(this).closest("tr").children(mergeCellSelector).remove();
                    }
                    else //若未發生合併，以目前的欄位作為上一欄位
                        $lastCell = $(this);
                });
            });
        });
    </script>

<table id="scoreboard">
    <thead>
        <tr><td>No</td><td>Name</td><td>Date</td><td>Score</td></tr>
    </thead>
    <tbody>
    </tbody>
</table>

void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[0].CssClass="SubProjectTd";
        // 在每一個 row的第一個 column加上 class
    }
}