JQueryに基づいて同じ内容を持つ結合セルを実装するコード

Web フロントエンドを開発する場合、同じセル内に同じコンテンツを表示する必要があるページやテーブルを作成する必要があることがよくあります。一般的な方法はテーブル内にテーブルをネストすることです。ページ数が増えるとページの読み込み速度に影響が出ますが、DIV で記述した CSS スタイルの数を制御するのが難しい場合はどうすればよいでしょうか。 JQuery を使用してテーブル内の同じ内容のセルを結合します。ここで皆さんに役立つコードを紹介します。
ヘッダー 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>

本体にテーブルを追加します

コードをコピー コードは次のとおりです: