////合併上下欄位(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
}
}