Web フロントエンドを開発する場合、同じセル内に同じコンテンツを表示する必要があるページやテーブルを作成する必要があることがよくあります。一般的な方法はテーブル内にテーブルをネストすることです。ページ数が増えるとページの読み込み速度に影響が出ますが、DIV で記述した CSS スタイルの数を制御するのが難しい場合はどうすればよいでしょうか。 JQuery を使用してテーブル内の同じ内容のセルを結合します。ここで皆さんに役立つコードを紹介します。
ヘッダー JQuery コード
<script type="text/javascript"> jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 return this.each(function(){ var that; $('tr', this).each(function(row) { $('td:eq('+colIdx+')', this).filter(':visible').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>