2

Javascript/Backbone を使用してテーブルを作成しました。テンプレートを使用して行を表示しているときに、最初から 1 つの行が表示され、1 つの行が非表示になっています。特定のテーブルをクリックすると、表示されている行の下にある非表示の行を表示して「展開」します。また、ループを使用してテーブルを作成しているため、すべての行が同じクラスと ID を持ちます。これまでのところ、これを使用して行を展開および折りたたみました。

expandRow: function() {
    if (document.getElementById('hiddenText').style.display == 'none' ) {
        document.getElementById('hiddenText').style.display = '';
    }
    else if (document.getElementById('hiddenText').style.display == '') {
        document.getElementById('hiddenText').style.display = 'none';
    }

ただし、このソリューションは、クリックした行に関係なく、同じテーブル行 (一番上の行) のみを開いたり閉じたりします。クリックした特定の行のみを展開/折りたたむための解決策を見つけるのに助けが必要です。

4

4 に答える 4

3

IDはページに対して一意である必要があります。それらが一意でない場合、JavaScript は最初に出現したもの、この場合は ID として「hiddenText」を持つ最初の行を選択します。

何らかの参照を介して目的の行を選択する必要があります。したがって、おそらくテーブルを作成するループで、行ids にインクリメンタル インデックスを含め、その方法で適切な行を選択できます。

于 2013-05-10T01:06:01.183 に答える
0

それらは一意ではないため、スクリプトはその ID を持つ最初の要素で停止しています。ループで一意の ID を動的に作成する必要があります。これを実現するには、整数カウンター変数 (var カウンター) を使用して、ID の末尾に一意の番号を追加します。次に、if ステートメントの条件を変更して、ID (getElementsByClassName('RowExpand')) ではなくクラス名でフェッチし、それらをすべて変数 (var hasClassRowExpand) に格納します。onClick イベントでは、クリックした行の ID への参照を取得し、hasClassRowExpand の各要素をループできます。ID が一致する要素を含むインデックスにヒットしたら、現在の状態に基づいて表示プロパティを操作します。

于 2013-05-10T01:45:00.190 に答える
0

私はこのようなCSSクラス定義を使用しています...

.hiddenRowTrue { display:none; }
.hiddenRowFalse { display:table-row; }

... JQuery toggleClass を使用して状態を切り替えます。

于 2014-09-05T11:22:51.393 に答える
0

ビューをどのように構築したかの内部構造はわかりません。それがあなたが以下に興味を持っているテーブルであると仮定するとthis.$el、私が書くコードです

expandRow: function() {
    if (this.$el.find("tr:hidden").length) {
        this.$el.find("tr:hidden").attr("display","");
    }
    else{
        $.el.find("tr:not(:hidden)").hide();
    }

上記のコードは多くの仮定で書かれているため、おそらく間違っている可能性があります。しかし、これはあなたの意見を書くべき方法です

于 2013-05-10T05:06:30.313 に答える