JS réalise la fusion des mêmes cellules dans le tableau-js tutoriel-php.cn

JS réalise la fusion des mêmes cellules dans le tableau

php中世界最好的语言

Libérer： 2018-03-15 13:32:08

original

3356 Les gens l'ont consulté

Cette fois, je vais vous amener JS pour fusionner les mêmes cellules dans le tableau. Quelles sont les précautions pour que JS fusionne les mêmes cellules dans le tableau. Ce qui suit est un cas pratique, prenons un. regarder.

Assurez-vous de noter que si vous effectuez une boucle depuis le début de la liste et supprimez un élément, certains éléments ne seront pas trouvés ou ne sont pas les éléments que vous recherchez. Toute personne intéressée peut l'étudier

<!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>

Copier après la connexion

Résumé : Lors de l'utilisation de Remove, veillez à noter que si vous effectuez une boucle depuis le début de la liste, après avoir supprimé un élément, certains éléments ne seront pas trouvés ou sont introuvable. L'élément que vous recherchez est préférable de faire une boucle par l'arrière.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

HTML+CSS+jQuery pour implémenter des images publicitaires carrousel

C3+jQuery pour créer des effets d'animation et des fonctions de rappel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!