鍍金池/ 問(wèn)答/HTML/ 點(diǎn)擊按鈕實(shí)現(xiàn)table的隱藏縮放?

點(diǎn)擊按鈕實(shí)現(xiàn)table的隱藏縮放?

clipboard.png
想點(diǎn)擊“查看更多”將未顯示完全的table的信息給顯示出來(lái),且文字變成“收起”,當(dāng)點(diǎn)擊“收起”時(shí),則收縮table內(nèi)容回上圖?

回答
編輯回答
只愛(ài)你

clipboard.png
加入display:block變成這個(gè)樣子

2017年8月26日 04:21
編輯回答
尋仙

如果數(shù)據(jù)都是提前加載好的話(huà),只是通過(guò)這個(gè)按鈕控制更多數(shù)據(jù)的顯示的話(huà),目前有兩個(gè)思路。

  1. 控制數(shù)據(jù)區(qū)域的高度,初始狀態(tài)下只顯示高度的一部分,點(diǎn)擊查看更多,顯示完整高度,展示完整數(shù)據(jù)
  2. 將多余數(shù)據(jù)放在一個(gè)相鄰的div里,點(diǎn)擊查看更多顯示,再點(diǎn)擊隱藏。
2018年4月26日 16:08
編輯回答
陌上花
btn.onclick = function(){
    if(table.style.display == "block"){
        table.style.display = "none";
    }else{
        table.style.display = "block";
    }
}
2018年6月27日 23:21