6

たくさんの列があるテーブルがあります。表に表示する列を選択するオプションをユーザーに提供したいと思います。これらのオプションは、列名とともにチェックボックスになります。では、チェックボックスに基づいてテーブルの列を非表示/再表示するにはどうすればよいですか？

各行の各tdを非表示（.hide（）を使用）すると機能しますか？テーブル内の列の場所にチェックボックスの値を割り当てることができるかもしれません。したがって、最初のチェックボックスは最初の列を意味します。次に、各行でその「番号付き」tdを再帰的に非表示にします。それはうまくいくでしょうか？

4

2 に答える 2

14

試す：

function hideColumn(columnIndex) {
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide();
}

これはかなり基本的なバージョンです。テーブルが要素を使用していない<TH>か、列のスパンが可変であると想定していますが、基本的な概念はそこにあります。n番目の子は1ベースのインデックスを使用することに注意してください。これを補うために、最新の段階で1を追加しました。

于 2010-04-07T21:02:31.640 に答える
1

I built a script that does what Rex suggests. There's a check box (or element) in each column that, when clicked, figures out which column it's in based on the nth-child and then hides the same ones in each other TR.

Before .hide() I'd add a class that I could reference to return the column.

The issue I had is I was working with heavily styled tables where some rows had colspans and some TDs had unique classes based on their position in the row. I rant into issues in IE where IE wouldn't always show() the hidden TDs with the proper styling. It seemed that IE had trouble redrawing TDs.

于 2010-04-07T21:11:31.913 に答える