javascript - 在表格单元格中隐藏/显示内容

Question

我有一个 HTML 表格，其中一个单元格中有很多文本。有没有一种简单的方法来隐藏内容，当我悬停这个确切的单元格时，整个内容都会显示出来？就像只显示前 10-20 个字符或其他内容。然后，当我悬停该单元格时，整个内容都会显示出来。

我可以仅使用 CSS 以简单的方式执行此操作，还是需要 JavaScript 等？

Answer 1

您可以在 CSS 和 JavaScript 中控制悬停时单元格的高度。

在 CSS 中，这看起来像：

.cell{
    height: 40px;
    transition: height 1s ease-in;
    overflow: hidden;
}
.cell:hover{
    height: 100px;
}

当然，我在这里随意选择数字，所以你需要根据你的需要来选择。

Answer 2

您可以使用 onmouseover 和 onmouseout 使用 javascript 完成此操作。

IE：

<td onmouseover="document.getElementById('textbox').innerHTML='Text to Show'" onmouseout="document.getElementById('textbox').innerHTML='Truncated Text'">
<div id=textbox>Truncated Text</div>
</td>

Answer 3

如果您的情况可能，您可以选择一个分隔位置：

<div>Some text that shows all the time
  <span class="more"> (more)</span>
  <span class="expanding"> and some more text that shows when you hover</span>
</div>

然后在 CSS 中，当您将鼠标悬停在 div 上时，分别隐藏和显示“更多”类和“扩展”类。

.more      { display: block; }
.expanding { display: none; }
div:hover > .expanding { display: block; }
div:hover > .more      { display: none; }

这样做是显示和隐藏 div 的子元素。如果您将 div 放在 td 中，它应该填满它，并且悬停看起来就像您悬停在其中的 td。或者您可以只使用 td 来保存所有三个。

唯一棘手的部分是它并不总是看起来很好，除非你有一个在“（更多）”上方结束的段落。这是因为您无法预测段落中间的行尾，因为保存文本的矩形会改变宽度。

小提琴

Answer 4

您可以使用 css text-overflow属性来隐藏带有省略号的单元格内容

像这样：

table tr td
{
    text-overflow: ellipsis; 
    height: 40px;
}

table tr td:hover
{
    text-overflow: none; 
    height: auto;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 5

这是一个例子，

我有一个很长的文本，当我的鼠标悬停它时我会提取它。

所以，我们开始

<--开始-->

'>p
onLoad=function()
{
var text = this.innerHTML;
var hide = this.innerHTML.substr(0,7) + "...";
this.innerHTML = 隐藏；
}
onMouseOver=function()
{
this.innerHTML = text;
}
onMouseOut=function()
{
this.innerHTML = hide;
}
< 这里是长文本 >p<

<--结束-->

另外，我怎样才能添加像你这样的程序部分？