私は大きなテーブルを持っています。ここにそのセクションがあります：
私の目標は、合計行以外のすべてのセクション行を切り替え、セクションの見出しを空の合計行セルに移動し、次に切り替えたときに元の形式に戻すことで、各セクションを折りたたみ可能および折りたたみ不可能にすることです。
私はいくつかの角度からこれにアプローチしようとしましたが、私はjQueryの初心者であるため、効率的な方法を見つけることはできません。
問題の最初の部分は、実際にセクションを定義することです。それらの長さはさまざまであるため、最初に各行を循環し、最初のセルが空かどうかを確認する必要があると考えました。そうでない場合は新しいセクションであると想定し、ある場合は別のセクションであると想定して現在のセクションに追加します。
次に、各セクションの最初の行とセルに対して、合計行以外のすべての行を切り替え、セクション タイトルをそこに移動するクリック イベントを設定します。
私はこれを達成することができましたが、信じられないほど多くの厄介な Javascript を使用しており、非常に遅いです。私が言ったように、私はこれを可能な限り最も効率的な方法で行うことができると思っています.
本質的に、すべての行をループして各セルなどを検査する代わりに、jQuery セレクターだけを使用してすべてのセクションを選択できる良い方法はありますか? より効率的な方法があるかどうかを知りたいだけですが、解決策をいただければ幸いです。
好奇心のために、画像に色を付けるために使用したコードを次に示します。
var rowCount = $("tr").length;
var rows = $("tr > td:first-child").not("tr:nth-child(1) > td:first-child").not("tr:nth-child("+rowCount+") > td:first-child").not("tr:nth-child("+(rowCount-1)+") > td:first-child");
var sectionTitles = $(rows).filter(function(){
return !($(this).text()=="");
});
var sectionItemTitles = $(rows).not(sectionTitles);
sectionTitles.css({"background":"red"});
sectionTitles.attr("type","section");
sectionItemTitles.css({"background":"blue"});
sectionItemTitles.attr("type","row");