javascript實(shí)現(xiàn)table單元格點(diǎn)擊展開隱藏效果(實(shí)例代碼)
更新時(shí)間：2017年04月10日 08:45:51 作者：下小朋友
這篇文章主要介紹了javascript實(shí)現(xiàn)table單元格點(diǎn)擊展開隱藏效果的實(shí)例代碼講解，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
如果table元素的高如果不設(shè)置，是根據(jù)內(nèi)容撐開的，根據(jù)這個(gè)規(guī)則，可以用js控制默認(rèn)狀態(tài)下table-cell的寬度，并將這一列的table-cell設(shè)置為dispaly：block，這樣多出來的內(nèi)容就會(huì)被隱藏掉，添加點(diǎn)擊事件，把table-cell的display在block和table-cell之間切換，就能實(shí)現(xiàn)點(diǎn)擊展開隱藏效果啦！
js代碼如下：
$('.cell').click(function(){
if($(this).css('display')=='block'){
console.log('ok');
$(this).css('display'，'table-cell');
}else{
$(this).css('display'，'block');
}
});
超級(jí)簡單！不過設(shè)置為block之后，表格的border重疊就會(huì)失效，要對(duì)這個(gè)動(dòng)態(tài)的列單獨(dú)再設(shè)置一下樣式，去掉它的邊框~
相關(guān)文章
這篇文章主要介紹了JS中input表單隱藏域及其使用方法講解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了如何去除js中的json存在的轉(zhuǎn)義字符\問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了點(diǎn)評(píng)js異步加載的4種方式，幫助大家更全面的了解js異步加載方式，感興趣的小伙伴們可以參考一下2015-12-12
使用JavaScript實(shí)現(xiàn)一個(gè)物理模擬
最近掌門人在寫3D游戲,對(duì)于其中的物理效果很感興趣,今天我將使用純JavaScript來實(shí)現(xiàn)一個(gè)簡易的物理模擬,其中包括碰撞檢測(cè)與響應(yīng)、摩擦力與空氣阻力、以及物體的破壞效果,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了如何用JS求Number類型數(shù)組中最大元素2018-04-04
之前的彈出層做的挺好，但是代碼結(jié)構(gòu)有問題，這次用到了，重構(gòu)了一下，改為jQuery的插件形式，感覺還不錯(cuò)，有興趣的朋友可以參考下，希望可以幫助到你2013-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)炫酷雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了JavaScript的流程控制語句，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript Window瀏覽器對(duì)象模型原理解析
這篇文章主要介紹了JavaScript Window瀏覽器對(duì)象模型,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了laydate日歷控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11