js tr控制下面的tbody隱藏和顯示
更新時(shí)間：2008年07月29日 10:12:49 作者：
這個(gè)問題弄了我?guī)滋鞗]心思寫程序，問了論壇很多網(wǎng)友才搞定的。
用的核心代碼
function $(obj){
return document.getElementById(obj);
}
window.onload = function(){
var table = document.getElementById("myTable");
//如果在表格區(qū)域內(nèi)產(chǎn)生單擊
table.onclick = function(e){
var e = window.event||e,target = e.srcElement||e.target;
//得到tr
while(target.tagName.toLowerCase() != "tr"){
target = target.parentNode;
}
var i = target.rowIndex;
//單擊單行的Tr的話就是控制tr + 1的隱藏和顯示
if(i%2 == 0){
var nrs = table.rows[i + 1].parentNode.style;
nrs.display = nrs.display == "none"?"":"none";
}
}
}
</script>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
function $(obj){
return document.getElementById(obj);
}
window.onload = function(){
var table = document.getElementById("myTable");
//如果在表格區(qū)域內(nèi)產(chǎn)生單擊
table.onclick = function(e){
var e = window.event||e,target = e.srcElement||e.target;
//得到tr
while(target.tagName.toLowerCase() != "tr"){
target = target.parentNode;
}
var i = target.rowIndex;
//單擊單行的Tr的話就是控制tr + 1的隱藏和顯示
if(i%2 == 0){
var nrs = table.rows[i + 1].parentNode.style;
nrs.display = nrs.display == "none"?"":"none";
}
}
}
</script>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- bootstrap——bootstrapTable實(shí)現(xiàn)隱藏列的示例
- BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問題淺析
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏）
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- js設(shè)置控件的隱藏與顯示的兩種方法
- jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
- js點(diǎn)擊頁面其它地方將某個(gè)顯示的DIV隱藏
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
- 如何用js控制frame的隱藏或顯示的解決辦法
- Bootstrap顯示與隱藏簡(jiǎn)單實(shí)現(xiàn)代碼
相關(guān)文章
如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁面時(shí)彈出“確定要離開此面嗎？”
這篇文章主要介紹了如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁面時(shí)彈出“確定要離開此面嗎？”的方法以及相關(guān)資料,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)連連看連線算法
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)連連看連線算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
webpack如何自動(dòng)生成網(wǎng)站圖標(biāo)詳解
這篇文章主要給大家介紹了關(guān)于webpack如何自動(dòng)生成網(wǎng)站圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)示例
這篇文章主要介紹了JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法實(shí)例分析【順序查找、最大最小值、自組織查詢】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實(shí)例形式分析了順序查找、最大最小值、自組織查詢算法相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
JavaScript 小型打飛機(jī)游戲?qū)崿F(xiàn)原理說明
這次為大家?guī)淼男∮螒蚴牵捍蝻w機(jī)。呃。。。我本人就寫不出什么驚天大作的游戲的了，只能寫寫小游戲，代碼量小，又可以學(xué)習(xí)，主要是想法思路，代碼量大，估計(jì)也沒啥人會(huì)去研究學(xué)習(xí)。。。2010-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)年歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了JS的數(shù)組方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
針對(duì)JavaScript中this指向的簡(jiǎn)單理解
這篇文章主要為大家詳細(xì)JavaScript中this指向的簡(jiǎn)單理解，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取圖片寬度與高度的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03