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

一个灵活的解决方案是动态添加/删除类而不是样式。

JS：

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

CSS：

.fullwidth{
    width: 100%;
}

Answer 2

你可以通过两种方式做到这一点

1：更改css属性

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

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

2：在css中创建一个类和动态添加/删除类

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

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

CSS：

.tabwidth{
       width: 100%;
    }

让我知道这有帮助吗？

Answer 3

您有一些额外的引号，您可以将其更改为：

<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");
});

这是一个工作演示

Answer 4

尝试这个，

起初你有一个idas contentnot classso use#而不是.inselecter

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

文档http://api.jquery.com/width