在文本縮短/延長的同時擴展/折疊表格行

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元素添加屬性來避免一些較小的內存泄漏。