Javascript / J-Query动态调整网格正方形的大小

Question

我要问的问题可能太具体而无法实现，但是我正在寻找的是一种在由颜色编码的单元格组成的网页中具有表格/网格的方法。 单击一个单元格后，它将展开以显示该单元格先前隐藏的内容。 理想情况下，这将伴随某种类似于jQuery的平滑动画。

我并不是在这里要求一个完整的解决方案，而是在哪里我需要开始寻找以便能够按照这些思路创建一些东西。

我在想的是在单击单元格之前看起来像这样的东西：

然后这样：

提前致谢，

凯兹

Answer 1

使用JavaScript

尝试这个

<td id="name1" onclick="myfunction()"><div id="content"></div></td>

Java脚本

<script type="text/javascript">
    function myfunction()
       {
        $("#content").html("Cell Content Become Visible "); 
        }
</script>

Answer 2

不确定我遇到了问题...

看来您必须在每个td上或者可能在表的正文上为click事件添加一个click事件的侦听器：检查“ event.target”属性，您就可以进入引发事件的td （我假设您正在使用HTML表）。

对于内容，您可以将其直接存储在单元格内部，也可以存储在div包装器中。 您可以在包装器上设置css属性溢出，以显示所需的内容（如果我没记错的话，您必须指定包装器的高度/宽度并在其上指定“ overflow：hidden;”）。 单元格将根据其内容相应地调整大小。

在点击处理程序中，您可以将overflow属性更改为“ overflow：visible;”：在这种情况下，将显示所有内容（或只是更改高度/宽度以显示更多内容）。 如果您没有为表格的单元格设置任何固定的高度，则该行将获得最高单元格的高度，因此当您展开单元格的内容时，不必固定行的高度。

PS：也许很有趣：使用“ table-layout：fixed;” 您应该能够为行分配百分比高度，例如：

table {
  height: 300px; 
}

.row1: {
  height: 50%;
}

.row2: {
  height: 50%;
}

Answer 3

伙计们，感谢您的提示，实际上我已经根据您的建议获得了我想要的东西。 特别是event.target属性很有用。 谢谢，伊兹卢卡。

我创建了一个显示我的解决方案的JSfiddle 。

我给想要调整大小的每个单元格都添加了一个类（“样式”），并使用了以下jquery代码：

$(document).ready(function () {
        $('.tlight').bind('click', resizeAll);

        function resizeAll() {
            $('.tlight').animate({
                height: 50,
                width: 50
            }, "slow");
            $(event.target).animate({
                height: 100,
                width: 100
            }, "slow");
        };
    });

• 凯兹