CODEWITHSUNDEEP
jqueryhtml
user1032957
user1032957

Reputation: 473

Jquery set width of table on button click

I have a table like this..

<table id="content" style ="border:none>
            <tr>
                <td>
                    <table  id="content_medium" style ="width:100%">
                        <tr class="grid_heading">
                            <th class="student">Students</th>
                            <th class="year">Year</th>
                            <th class="group">Roll Group</th>
                            <th class="Type">Session</th>
                        </tr>
                    </table>
                </td>
            </tr>
</table>

How can I change the width of table using jquery.. I have button which when clicked should add width 100% and should remove width attribute when clicked next time..

Like?

function openpartialView() {
            $(".content").addcss("width","100%");
    }
function closepartialView() {
            $(".content").removecss("width", "100%");
    }

Upvotes: 1

Views: 4333

Answers (4)

Rakesh Singh
Rakesh Singh

Reputation: 1260

you can do this in two way

1: change css property

function openpartialView() 
{
   $("#content").css("width","100%");
}

function closepartialView() 
{
    $("#content").css("width", "0%");
}

2: Make an one class in css and dynamic add/remove class

function openpartialView() 
{
   $("#content").addClass("tabwidth");
}

function closepartialView() 
{
    $("#content").removeClass("tabwidth");
}

CSS: 

.tabwidth{
       width: 100%;
    }

Let me know is this helpfull?.

Upvotes: 2

isJustMe
isJustMe

Reputation: 5470

You have a few extra quotes, you can change it to:

<button id="tblsize">Change Size </button>
<table id="content" style ="border:none">
            <tr>
                <td>
                    <table  id="content_medium" style="width:100%" >
                        <tr class="grid_heading">
                            <th class="student">Students</th>
                            <th class="year">Year</th>
                            <th class="group">Roll Group</th>
                            <th class="Type">Session</th>
                        </tr>
                    </table>
                </td>
            </tr>
</table>

create CSS class:

.changeWidth{
    width: 100%;
}

and finally use:

$("#tblsize").click(function() {
   $("#content").toggleClass("changeWidth");
});

Here is a working demo

Upvotes: 1

Fallexe
Fallexe

Reputation: 596

A flexible solution is to dynamically add/remove classes instead of styling.

JS:

$("#content").addClass('fullwidth');
$("#content").removeClass('fullwidth');

CSS:

.fullwidth{
    width: 100%;
}

Upvotes: 5

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

At First you have an id as content not class so use # instead of . in selecter

function openpartialView() {
    $("#content").width("100%");
}
function closepartialView() {
    $("#content").width('');
    //you can use  $(".content").removeAttr('style');
}

Docs http://api.jquery.com/width

Upvotes: 0

Related Questions