communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

基于JQuery实现相同内容合并单元格的代码

ringa_lee
Libérer： 2018-05-11 15:40:33
original
1272 Les gens l'ont consulté

web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示，一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多，那怎么办呢？我们就中和下利用JQuery来和他一个table里面相同内容的单元格，这里代码跟大家分享下，希望对大家有用，如下： 
头部JQuery代码 

复制代码 代码如下:

<script type="text/javascript"> 
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 
return this.each(function(){ 
var that; 
$(&#39;tr&#39;, this).each(function(row) { 
$(&#39;td:eq(&#39;+colIdx+&#39;)&#39;, this).filter(&#39;:visible&#39;).each(function(col) { 
if (that!=null && $(this).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); 
$(this).hide(); 
} else { 
that = this; 
} 
}); 
}); 
}); 
} 
$(function() { 
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值 
$(“#table1″).rowspan(2); 
}); 
</script>
Copier après la connexion

在body里面加入一个表格

复制代码 代码如下:

<body> 
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px"> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
</tr> 

<tr> 
<td>1</td> 
<td>f</td> 
<td>3</td> 
<td>s</td> 
</tr> 
</table> 
</body>
Copier après la connexion
Étiquettes associées：
相同内容合并
source：php.cn
Article précédent：myFocus slide3D v1.1.0 使用方法与下载_javascript技巧 Article suivant：Jquery 插件开发笔记整理_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Quelles sont les meilleures pratiques pour afficher les informations de version dans les applications Web ? Je développe une application Web. Quelles sont les meilleures pratiques pour afficher les ...
Depuis 2024-04-06 19:13:16
0
2
476
Mysql renvoie certains enregistrements vides dans le champ de date car la date a plusieurs formats J'essaie d'analyser la colonne order_date et la colonne a plusieurs formats de date et je ...
Depuis 2024-04-06 13:29:40
0
1
466
Comment « connecter » plusieurs produits en utilisant leurs SKU ? Je souhaite fusionner l'inventaire de deux produits ou plus en fonction de leur SKU dans W...
Depuis 2024-04-05 08:53:52
0
1
3478
return(); ne fonctionne pas pour 1 itinéraire mais fonctionne pour presque le même itinéraire J'ai 2 routes, une pour la désinscription et une pour la restauration, les deux routes son...
Depuis 2024-04-04 17:34:09
0
1
311
Comment fusionner deux champs avec le même nom mais des identifiants différents dans la même ligne dans MySQL ? J'ai un projet dans lequel le client peut sélectionner un prix en fonction d'une case à co...
Depuis 2024-04-04 12:13:47
0
1
283
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal