Maison >interface Web >Questions et réponses frontales >jquery implémente la fusion des lignes du tableau
jquery implémente la fusion des lignes du tableau
- 王林original
- 2023-05-14 14:20:38901parcourir
Dans le développement Web, les tableaux sont l'un des éléments fréquemment utilisés, utilisés pour afficher plusieurs éléments de données. Mais parfois, nous devons fusionner plusieurs lignes de données pour afficher des informations plus claires. Cet article explique comment utiliser jQuery pour fusionner les lignes d'un tableau.
Étape 1 : Déterminez les colonnes qui doivent être fusionnées
Nous devons d'abord déterminer quelles colonnes doivent être fusionnées. En règle générale, nous devons déterminer quelles colonnes contiennent les mêmes informations et devons les fusionner.
Par exemple, dans le tableau ci-dessous, nous devons fusionner les mêmes cellules dans la deuxième colonne.
| Nom | Sujet | Réalisations |
|---|---|---|
| Zhang San | Mathématiques | 90 |
| Li Si | Mathématique s | 80 |
| Zhang San | Chinois | 85 |
| 李思 | Chinois | 95 |
Étape 2 : Écrire du code jQuery
Avec les colonnes qui doivent être fusionnées, nous pouvons commencer à écrire du code jQuery. L'idée du code est de trouver les cellules adjacentes et de les fusionner si le contenu est le même.
Ce qui suit est l'implémentation spécifique du code :
function mergeCells(tableID, colList) {
// 遍历需要合并的列
for (var colIndex = 0; colIndex < colList.length; colIndex++) {
var startIndex = 1; // 开始合并的行
var endIndex = 0; // 结束合并的行
var preContent = ''; // 前一个单元格的内容
// 遍历每一行
$('#' + tableID + ' tr').each(function(rowIndex) {
var content = $(this).find('td:eq(' + colList[colIndex] + ')').text(); // 获取当前单元格的内容
// 判断当前单元格是否需要合并
if (rowIndex > startIndex && content == preContent) {
endIndex = rowIndex; // 更新结束合并的行索引
} else {
if (endIndex > startIndex) {
// 合并单元格
$(this).find('td:eq(' + colList[colIndex] + ')').attr('rowspan', endIndex - startIndex + 1);
// 隐藏被合并的单元格
for (var i = startIndex; i <= endIndex; i++) {
$('#' + tableID + ' tr:eq(' + i + ')').find('td:eq(' + colList[colIndex] + ')').hide();
}
}
// 更新开始合并的行索引和前一个单元格的内容
startIndex = rowIndex;
endIndex = rowIndex;
preContent = content;
}
});
}
}Le code ci-dessus parcourra les colonnes spécifiées dans le tableau, trouvera les mêmes cellules et les fusionnera. Parmi eux, tableID est l'identifiant de la table et colList est la liste d'index des colonnes qui doivent être fusionnées.
Étape 3 : Appelez la fonction pour fusionner les lignes
Nous pouvons appeler la fonction mergeCells pour fusionner les lignes du tableau une fois la page chargée.
Par exemple, ajoutez le code suivant à la page :
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>语文</td>
<td>95</td>
</tr>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
mergeCells('myTable', [1]);
});
</script>
</body>De cette façon, les lignes du tableau peuvent être fusionnées.
Résumé :
Cet article présente l'utilisation de jQuery pour fusionner les lignes d'un tableau. En écrivant des fonctions pour rechercher des cellules adjacentes, les fusionner et les masquer, vous pouvez facilement obtenir l'effet d'affichage du tableau.
Bien sûr, non seulement en fusionnant des lignes, nous pouvons également apprendre d'idées similaires pour mettre en œuvre d'autres opérations de table complexes.
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!