0

ヘッダーをクリックしながら列を非表示にしています。私のテーブルには列スパンと行スパンがあります。私が使用しているコードは

selector = " > tbody > tr:has(td) td:nth-child(" + Ix + ")";

$(tbl).find(selector).each(function () {

    if (rIx > 0) {
            HideAndShowEle($(this)[0], bShow, true);
    }

})

200 行と 20 列を超える大きなテーブルの非表示は非常に遅くなります。より良い方法で特定の列を選択する他の方法を見つけるのを手伝ってください

4

3 に答える 3

1

ヘッダーをクリックすると、列が非表示になります。

jsフィドル

$("table thead th").on("click", function(){
   var index = $(this).index() + 1; 
    $("table tr td:nth-child(" + index + ")").add(this).hide()
});​



<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
</tbody>
</table>​
于 2012-10-31T13:11:08.157 に答える
0 
selector = $('table tbody').has('td').children(Ix)

$（selector）.each（function（）{

if (rIx > 0) {
        HideAndShowEle($(this)[0], bShow, true);
}

}）

于 2012-10-31T13:06:11.777 に答える
0

列に対する私の推奨手法 (複数の列スパンを持つセルがない場合) は、列ごとに一意の css クラスを使用し、そのクラスをセレクターとして使用することです。実際の css クラスに対応している必要はありません。識別可能である必要があります。

<table class="firstTable">
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
</table>

<table class="secondTable">
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
  <tr>
    <td class="column1"></td>
    <td class="column2"></td>
    <td class="column3"></td>
  </tr>
</table>

共通セレクターを使用して、列を非表示にできます。

$(".firstTable .column2").hide();

ヘッダーのリンクからこれにアクセスするには、リンクにデータ属性を指定して、それがどの列にあるかを示すか、その親を使用します。

<a href="#" data-column="column2" data-table="firstTable" class="columnHeader">Column Header</a>

$(".columnHeader").click(function(event) {
    var col = $(this).attr("column");
    var table = $(this).attr("table");
    $("." + table + " ." + col).hide();
});

特定の要件やページ構造がわからないため、この投稿されたコードには明らかな穴がありますが、ここでの概念はかなり適応できるはずです。

于 2012-10-31T13:19:58.890 に答える