ホームページ > ウェブフロントエンド > jsチュートリアル > JQueryに基づいて同じ内容を持つ結合セルを実装するコード

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

ringa_lee
リリース: 2018-05-11 15:40:33
オリジナル
1294 人が閲覧しました

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>
ログイン後にコピー
本体にテーブルを追加します


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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート