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

Question

我所询问的可能有点过于具体而无法实现，但我正在寻找的是一种在由彩色编码单元格组成的网页中使用表格/网格的方法。单击一个单元格后，它会展开以显示以前隐藏的单元格内容。理想情况下，这将伴随着某种jquery-esque平滑动画。

我不是要求在这里提供完整的解决方案，而是我需要开始寻找能够沿着这些方向创建的东西。

在您点击单元格之前，我的想法是这样的：

之后：

提前致谢，

KEZ

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事件的监听器，或者在表的tbody上为ligther添加一个监听器：检查＆＃34; event.target＆＃34;属性，你可以到达引发事件的td（我假设你正在使用HTML表）。

对于内容，您可以将其直接存储在单元格内部，也可以在div包装器中;你可以在包装器上设置css属性溢出，尽可能多地显示内容（你应该指定包装器的高度/宽度和＆＃34;溢出：隐藏;＆＃34;在它上面，如果我回想一下）。单元格将根据其内容进行相应调整。

在点击处理程序中，您可以将溢出属性更改为＆＃34;溢出：可见;＆＃34;：在这种情况下，将显示所有内容（或仅更改高度/宽度以显示更多内容它）。 如果您没有为表格的单元格设置任何固定高度，则该行将获得最高单元格的高度，因此您不必修改行的高度爆炸细胞的内容。

PS：也许很有趣：使用＆＃34; table-layout：fixed;＆＃34;您应该能够为行指定百分比高度，例如：

table {
  height: 300px; 
}

.row1: {
  height: 50%;
}

.row2: {
  height: 50%;
}

Answer 3

感谢您的提示，伙计们，我实际上设法得到了我想要的建议。特别是event.target属性很有用。谢谢，Izzluca。

我创建了JSfiddle来展示我的解决方案。

我为每个希望能够调整大小的单元格提供了一个类（＆＃34; tlight＆＃34;），并使用了以下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");
        };
    });

• KEZ