2

私はJQueryを使用しています。テーブルの列を非表示にする必要があります(divベース)。次の例では、チェックボックスをクリックしてテキストボックスを非表示/表示する必要があります。テキスト ボックスを非表示にした後、段落 2 が上に移動します。同じで、顧客名と住所の位置を変更する必要はありません。

HTMLコードは

<input type="checkbox" id="chk" />Check it, if customer has no company.
<span>Paragraph 1st Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </span>
        <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Company Name</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                <div class="divCell" align="center"><input type="text" /></div>
                <div class="divCell" align="center">Customer Name</div>
                <div class="divCell" align="center">Customer Address</div>
            </div>
            <div class="divRow">
                <div class="divCell" align="center"><input type="text" /></div>
           </div>
            <div class="divRow">
                <div class="divCell" align="center"><input type="text" /></div>
           </div>
      </div>
<p>Paragraph 2nd Lorem Ipsum  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </P>

CSSは、

.divTable
{
    display:  table;
    width:auto;
    background-color:#eee;
    border:1px solid  #666666;
    border-spacing:5px;
}

.divRow
{
   display:table-row;
   width:auto;

}

.divCell
{
    float:left;
    display:table-column;
    width:200px;
    background-color:#ccc;

}

テーブルの列を非表示にするにはどうすればよいですか (div ベース)?

4

3 に答える 3

1

これはうまくいくかもしれません：

$("input[type=checkbox]").on("change", function(){
    $("input[type=text]").toggle();
});
于 2012-09-07T07:05:31.410 に答える
0

試す

$('input[type=text]').css('visibility','hidden');

このようにそれらを隠す代わりに

$('#chk')​​​​.click(function(){
    if($('input[type=text]').css('visibility')=='hidden')
    {
       $('input[type=text]').css('visibility','');
    }
    else
    {
        $('input[type=text]').css('visibility','hidden')
    }
});​

ライブデモ

于 2012-09-07T07:07:13.133 に答える
0

このデモのようなものが欲しい

$("input[type=checkbox]").on("change", function(){
    $(".divTable").toggle();
});​
于 2012-09-07T07:14:14.843 に答える