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。

Here's the page explaining how.

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

动态表格宽度

3 个答案: