Question

我使用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）？

Answer 1

这可行：

$("input[type=checkbox]").on("change", function(){
    $("input[type=text]").toggle();
});

Answer 2

尝试

$('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')
    }
});

Live Demo

Answer 3

你想要这样的Demo

$("input[type=checkbox]").on("change", function(){
    $(".divTable").toggle();
});

如何隐藏基于div的表中的列

3 个答案: