頁面顯示數據較多時隱藏部分數據

部分頁面代碼:
<div>
<div id="geGameResultAll">
<!-- 改爲一次取出所有數據  -->
<c:forEach items="${geHealthResults}" var="resultRecord">
    ${resultRecord.result}<br>
</c:forEach>
<!-- 數據較多時 ,隱藏部分數據 -->
</div>

<a id="more">查看全部</a>
</div>
JS實現代碼:
<script type="text/javascript">
var end;
var oDiv = document.getElementById("geGameResultAll");
var oText = oDiv.innerHTML;
function suolve(str) {
var sub_length = 500;
var str_length = str.length;
var res = str.substring(0, sub_length - 5);
if (sub_length < str_length) {
end = res + "……";
} else {
end = res;
document.getElementById("more").style.display = "none";
}
return end;
};

suolve(oText);
oDiv.innerHTML = end;
var oBtn = document.getElementById("more");
oBtn.onclick = function() {
if (oBtn.innerHTML == "查看全部") {
oDiv.innerHTML = oText;
oBtn.innerHTML = "收起";
} else if (oBtn.innerHTML == "收起") {
oDiv.innerHTML = end;
oBtn.innerHTML = "查看全部";
}
};

</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章