JQuery實作表格中相同儲存格合併範例程式碼_jquery

代碼：

複製程式碼 程式碼如下:

merge.html
;


>



function merge1(){ //可實現單元格，透過給予開始單元格的比較
var totalRow = $("#tbl").find("tr").length;
vartotalCol = $("#tbl").find("tr").eq(0).find( "td").length;
for(var col=totalCol-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find ("tr").eq(totalRow-1).find("td").eq(col);
for(var row =totalRow-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find (“td”).eq(col);
if(startCell.text() == targetCell. text() && startCell.text()!=""){
spanNum ;
targetCell.attr("rowSpan",spanNum);
startCell.remove();
}其他{
spanNum =1;
}
startCell = targetCell;
}
}
}
function merge2() { //可實現合併單元格, >var totalCols = $("#tbl").find("tr :eq(0)").find("td").length;
var TotalRows = $("#tbl").find(" tr").length;
for ( var i = totalCols-1; i >= 1; i--) {
for ( var j = totalRows-1; j >= 1; j--) {
startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);
targetCell = $("#tbl"). find("tr").eq(j - 1).find("td").eq(i);
if (startCell.text() == targetCell.text() && targetCell.text() ! = "") {
targetCell.attr("rowSpan", (startCell.attr("rowSpan")= =未定義)?2:(eval(startCell.attr("rowSpan")) 1));
startCell.remove();
}
}
}
}
/*先合併，使用style的display:none將相同元素隱藏，然後刪除
* /
function merge3() {
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var TotalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row =totalRows-1;row>= 1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find (“td”).eq(col);
if (startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum ;
targetCell.attr("rowSpan",spanNum);
startCell.attr("rowSpan",spanNum);
startCell.attr ("樣式","可見性:隱藏");
// startCell.attr("style","display:none");
}其他{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i >=1;i-- ){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if (cell.attr("style")!=undefined){
if(cell.attr("style")=="可見性：隱藏"){
cell.remove();
}
}
}
}
}
function merge4(){ //與merge3方法類似，目的是看一下與visibility:hidden的效果差異
var TotalColdisplay:none與visibility:hidden的效果差異
var TotalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var TotalRows = $("#tbl").find("tr") .length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr" ).eq(totalRows-1).find("td").eq(col);
for(var row =totalRows-1;row>=1;row--){
targetCell = $( "#tbl").find("tr").eq(row-1).find (“td”).eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum ;
targetCell.attr("rowSpan",spanNum);
startCell.attr("樣式","顯示:無");
// startCell.attr("style","display:none");
}其他{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i-- ){
cell = $ ("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="display:none"){
cell.remove();
}
}
}
} }
腳本>
頭>




銷售時間
裙子
褲子
風衣
鞋子

標題>
;

8:00-9:00
3

4



9:00-10:00
3
2
5
3


10:00-11:00
3
2

1


11:00-12:00



1


表>

身體>

總結：在使用remove的時候，一定要注意如果從list開始的元素循環下去，remove掉一個元素後，有些元素就找不到了或說不是要尋找那個元素；最好是從後面開始循環。