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=checkbox]").on("change", function(){
    $(".divTable").toggle();
});​
于 2012-09-07T07:14:14.843 回答
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 回答