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

这是一个有效的demo

Answer 4

试试这个，

首先，id为content而不是class，因此#

中使用.代替selecter

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

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

Jquery在按钮单击时设置表的宽度

4 个答案: