-2

合計10列のテーブルが必要ですが、テーブルが最初にレンダリングされるときに、10列のうち7列のみを表示するか、中央から3列を非表示にしたいとします(最後の3列や最初の列ではありません) ）。次に、クリックするとテーブルが展開され、それらの列が正しい場所に挿入されるボタンなどがあります。

これは可能ですか？jQueryを使用しています。jQueryには表示および非表示機能があることは知っていますが、それは特定の要素ではなく、段落や表全体などのオブジェクトにのみ適用されるようです。

現在、私はこれを持っています：

<table id="tableone" border="1">
    <tr class="del">
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
        <td >Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
    </tr>
</table>
4

4 に答える 4

1

jqueryを使用してこれを実現できます。クリック後に表示する列に同様のクラスをいくつか与えます。正しいことを理解していれば、以下を試すことができます

$("button").on("click", function(){
    $("class_of_the_colums").toggle();
}

詳細については、jquery を参照してください: http://www.jquery.com

于 2012-07-19T15:37:03.607 に答える
0

おそらく、非表示にしたいすべての要素に一意の ID を使用する場合は、次のようになります。

<table id="tableone" border="1"> 
<tr id="del1"> 
<td>Row 0 Column 0</td> 
<td >Row 0 Column 1</td> 
<td >Row 0 Column 2</td> 
</tr> 
<tr id="del2"> 
<td>Row 1 Column 0</td> 
<td>Row 1 Column 1</td> 
<td>Row 1 Column 2</td> 
</tr> 
<tr id="del3"> 
<td>Row 2 Column 0</td> 
<td>Row 2 Column 1</td> 
<td>Row 2 Column 2</td> 
</tr> 
<tr id="del4"> 
<td>Row 3 Column 0</td> 
<td>Row 3 Column 1</td> 
<td>Row 3 Column 2</td> 
</tr> 
<tr id="del5"> 
<td>Row 4 Column 0</td> 
<td>Row 4 Column 1</td> 
<td>Row 4 Column 2</td> 
</tr> 
<tr id="del6"> 
<td>Row 5 Column 0</td> 
<td>Row 5 Column 1</td> 
<td>Row 5 Column 2</td> 
</tr>

次に、css スタイリングで、.del を次のように置き換えます。

#del1,
#del2,
#del3,
#del4,
#del5,
#del6{
properties
}

次に、jQuery を使用すると、次を使用できます。

$(document).ready(function(){
$("#del3").hide();
$("#del4").hide();
});

と：

$("#id_of_button_that_will_show_the_hidden_elements").click(function(){
$("#del3").show();
$("#del4").show();
});

これは、すべての要素が $(".del").hide(); と同じクラスの一部であると機能しません。そのクラスのすべての要素を非表示にするだけです。

私が助けてくれることを願っています=）

于 2012-07-19T15:47:53.173 に答える
0

次のように、CSS セレクターを使用して、すべての TR 内の特定の TD のみを選択できます: (カウントはゼロではなく 1 から始まります!)

​$('tr td:nth-child(2)').hide()​​​​​​​​​​​​​​​​​​​​​​​​;

列を再度表示したい場合は、次のことができます。

​$('tr td:nth-child(2)').show()​​​​​​​​​​​​​​​​​​​​​​​​;

非表示にする列の数またはその位置を変更することを計画している場合は、これらの列にクラスを割り当てて を使用することをお勧めしますが$('.className').hide()、上記の例と同じ波長で、次のようにします。

    $(document).ready( function() {
        // Creates a reference to columns 2 and 3;
        var $columnsToHide = $('tr td:nth-child(2), tr td:nth-child(3)');
        // Hides them
        $columnsToHide.toggle();
        // if element with id buttonID is clicked
        $('#buttonID').on('click', function() {
            // show the columns
            $columnsToHide.toggle();
        });
    }​);
于 2012-07-19T15:45:13.130 に答える
0

次のような関数を書くことができます:

function hssel(cls,from,fr,hs) {
  if ( from < 0 ) {
var chlds = $('tr.'+cls).parent().children().length;
  from = chlds + from;
  }
  for ( var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++ ) {
    $('tr.'+cls+':nth-child('+i+')')[(hs=="show"?"show":"hide")]();
  }
}

//hssel("del",0) //would hide the first row with the class del
//hssel("del",0,3) //would hide the first three rows
//hssel("del",-3,3) //would hide the last three rows
//hssel("del",-3,3,"show"); //would show the last three rows
hssel("del",-3,3);

これはJSBinの例です
そして、これは列のための同じ関数です^^

function hssel(cls,from,fr,hs) {
  if ( from < 0 ) {
    var chlds = $('tr.'+cls+':first-child').children().length;
    console.log(chlds);
  from = chlds + from;
  }
  for ( var i = from+1,fr = (from+fr)||from+1 ;i <= fr ;i++ ) {
    $('tr.'+cls+' td:nth-child('+i+')')[(hs=="show"?"show":"hide")]();
  }
}

JSBin の例では、使用法は行
の場合と同じです

于 2012-07-19T16:35:04.360 に答える