Jquery набор ширина стола на кнопку мыши

Question

У меня есть таблица вроде этого ..

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

Как я могу изменить ширину таблицы с помощью JQuery .. У меня есть кнопка, которая при нажатии на Добавлю, ширину 100% и следует удалить атрибут ширины при щелчке в следующий раз.

Нравится?

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

Answer 1

У вас есть несколько лишних кавычек, вы можете изменить его на:

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

создать CSS класс:

.changeWidth{ 
    width: 100%; 
} 

и, наконец, использовать:

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

Вот рабочая demo

Answer 2

Попробуйте это,

Во-первых у вас есть id, как content не class так использовать # вместо . в selecter

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

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

Answer 3

Гибкое решением является динамически добавлять/удалять классы вместо моделирование.

JS:

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

CSS:

.fullwidth{ 
    width: 100%; 
} 

Answer 4

вы можете сделать это в два пути

1: Изменение CSS свойство

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

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

2: Оформить один класс в css и динамический класс add/remove

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

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

CSS:

.tabwidth{ 
     width: 100%; 
    } 

Позвольте мне знать это полезно ?.