CODEWITHSUNDEEP
jquerycsshtml
Pradip
Pradip

Reputation: 1327

How to hide column in div based table

I use JQuery. I need to hide column of table (div based). In following example, i need to hide/show the textboxes on click of check box. And after hiding text boxes, paragraph 2nd will move to upper side. On the same, i do not need to change the position of customer name & address.

HTML code is

<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 is,

.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;

}

How can i hide the column of table (div based)?

Upvotes: 2

Views: 317

Answers (3)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

You want something like in this Demo

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

Upvotes: 0

rahul
rahul

Reputation: 7663

try

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

instead of hiding them like this

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

Live Demo

Upvotes: 0

Alex Ball
Alex Ball

Reputation: 4474

This could work:

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

Upvotes: 1

Related Questions