在文本缩短/延长的同时扩展/折叠表格行

Question

例如，我有一张表中的3行。 每行都从数据库获取其内容。 默认情况下，当行折叠时，应缩短文本-

trs[i].innerText = trs[i].innerText.substring(0,25) + '...';

当用户单击div时，它会展开，如果再次单击，则会折叠。

if(tr.style.height == "150px")
        {
             tr.style.height = "20px";
        }
    else {
        tr.style.height = "150px";
    }

到目前为止，还不错，但是我希望仅当div折叠时才缩短文本。 使用我的解决方案，页面加载时，文本缩短了，但是当行扩展时，文本却缩短了。 我怎样才能解决这个问题？ 我只能想到行何时扩展以调用返回原始数据的AJAX函数，但是我认为这不是最好的方法。 提前致谢。

Answer 1

首先，您必须先存储全文，然后再缩短它。

trs[i].fullText = trs[i].innerText;
trs[i].innerText = trs[i].innerText.substring(0,25) + '...';

然后，您可以在处理程序中将其还原：

tr.innerText = tr.fullText;
tr.style.height = "150px";

这是一个jsFiddle 。 我正在使用jQuery选择元素，但是无论如何您已经有了正确的tr。 如果您使用的是jQuery，则还可以使用$(tr).data("fullText", $(tr).text()) ，这可以通过在旧版本的Internet Explorer中为DOM元素添加属性来避免一些较小的内存泄漏。