1

このようなテーブルがあります..

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

4 に答える 4

5

柔軟な解決策は、スタイリングの代わりにクラスを動的に追加/削除することです。

JS:

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

CSS:

.fullwidth{
    width: 100%;
}
于 2013-05-30T04:40:11.987 に答える
2

これは2つの方法で行うことができます

1: CSS プロパティを変更する

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

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

2:cssでクラスを1つ作り、クラスを動的に追加/削除する

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

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

CSS:

.tabwidth{
       width: 100%;
    }

これが役に立ったか教えてください。

于 2013-05-30T04:50:39.570 に答える
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");
});

これが実際のデモです

于 2013-05-30T04:47:46.040 に答える
0

これを試して、

最初はinの代わりにidas contentnot classso useがあります#.selecter

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

ドキュメントhttp://api.jquery.com/width

于 2013-05-30T04:36:08.403 に答える