JQuery 는 표 의 같은 셀 과 예제 코드 를 통합 합 니 다.

코드:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>merge.html</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="css/jquery-ui.css" /> 
<script src="js/jquery.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script type="text/javascript"> 
function merge1(){ //      ，      cell    
var totalRow = $("#tbl").find("tr").length; 
var totalCol = $("#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(); 
}else{ 
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")==undefined)?2:(eval(startCell.attr("rowSpan"))+1)); 
startCell.remove(); 
} 
} 
} 
} 
/*   ，  style  display:none       ，   remove 
*/ 
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("style","visibility:hidden"); 
// startCell.attr("style","display:none"); 
}else{ 
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")=="visibility:hidden"){ 
cell.remove(); 
} 
} 
} 
} 
} 
function merge4(){ // merge3    ，       display: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("style","display:none"); 
// startCell.attr("style","display:none"); 
}else{ 
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(); 
} 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<table id="tbl" cellpadding="3" border=1> 
<thead> 
<tr> 
<td>    </td> 
<td>  </td> 
<td>  </td> 
<td>  </td> 
<td>  </td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>8:00-9:00</td> 
<td>3</td> 
<td></td> 
<td>4</td> 
<td></td> 
</tr> 
<tr> 
<td>9:00-10:00</td> 
<td>3</td> 
<td>2</td> 
<td>5</td> 
<td>3</td> 
</tr> 
<tr> 
<td>10:00-11:00</td> 
<td>3</td> 
<td>2</td> 
<td></td> 
<td>1</td> 
</tr> 
<tr> 
<td>11:00-12:00</td> 
<td></td> 
<td></td> 
<td></td> 
<td>1</td> 
</tr> 
</tbody> 
</table> 
<input type="button" value="  " id="merge" onclick="merge2();"> 
</body> 
</html>

요약:reove 를 사용 할 때 list 의 시작 요소 가 순환 하면 reove 에서 하나의 요 소 를 떨 어 뜨 린 후에 일부 요 소 는 찾 을 수 없 거나 찾 으 려 는 요소 가 아니 라 는 것 을 주의해 야 합 니 다.가장 좋 은 것 은 뒤에서 부터 순환 하 는 것 이다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

latex 초보 자 입문 (2)

지난 글 은 latex 초보 자 들 이 입문 하여 사용 환경 과 다른 기본 적 인 내용 을 기본적으로 소개 하 였 습 니 다.이제 이번 조판 에서 발생 한 문 제 를 여러분 과 공유 하 겠 습 니 다. latex 는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JQuery 는 표 의 같은 셀 과 예제 코드 를 통합 합 니 다.

좋은 웹페이지 즐겨찾기