Javascript 动态表格宽度

我有一个表格单元格，其中显示其他表格（带有背景色）。内部表格并不总是显示出来；它们可以通过按钮隐藏（使用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%

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

---

您可以使用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”

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

还有另一种方法：

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

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

---

你可以用JavaScript，他可以用JavaScript？很高兴知道..因为表格单元格根据其内容进行调整，所以根据定义，其内容的总宽度为100%。问题解决了。带$（“.show”）。长度的解决方案对我来说似乎是最好的。但是当我尝试$（“.event.show”）.length时，得到0（即使所有表都有类“event show”）$（“.event.show”）。length应该与类“event show”一起使用。也许你忘了一个空格。函数在我的代码中放错了位置。现在一切都很好，非常感谢！