javascript - 动态表格宽度

Question

我有一个表格单元格，其中显示了其他表格（带有背景颜色）。内表并不总是显示；它们可以通过按钮隐藏（使用 jQuery 更改类）。现在我希望外部单元格始终充满颜色。这意味着如果只显示一个表格，它的宽度应该是 100%。当显示两个时，每个宽度应为 50%，依此类推。我该怎么解决这个问题？

这是一个例子：

... 
<td>
<table class="show"><tr><td></td></tr></table>
<table class=""><tr><td></td></tr></table>
<table class="show"><tr><td></td></tr></table>
</td>
...

在这种情况下，宽度应为 50%

Answer 1

要更改元素的宽度，您可以使用 jquery。

这是解释如何的页面。

Answer 2

您可以使用 Jquery 更改宽度值。

var count_table = $(".show").length;         // count ".show" elements

$(".show").each(function{                    // iteration on each ".show"
    var width = 100/count_table;             // % value of new width
    $(this).css("width", width+"%");         // CSS modification
});

此代码仅适用于一个 TD 元素。您还需要迭代每个“td”。

（希望我回答了你的问题）

Answer 3

这是另一种方式：http: //jsfiddle.net/ypJDz/1

对于您需要的东西来说有点太复杂了，但是扩展的可能性很大。

function resizeTables() {
    var baby = $("td > table.show"),
        amount = baby.length,
        mother = $("body");

    baby.width(function () {
        var w = mother.width() / amount;
        return w;
    });
}

resizeTables();

$("button").click(function () {
    var $this = $(this),
        ID = $this.index() + 1;

    $("td > table:nth-child(" + ID + ")").toggleClass("show");
    resizeTables();
});