js tr控制下面的tbody隱藏和顯示
更新時間：2008年07月29日 10:12:49 作者：
這個問題弄了我?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對于隱藏域驗證和程序賦值即時驗證的問題淺析
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時自動折疊隱藏）
- BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
- js設(shè)置控件的隱藏與顯示的兩種方法
- jquery和js實(shí)現(xiàn)對div的隱藏和顯示方法
- js點(diǎn)擊頁面其它地方將某個顯示的DIV隱藏
- javascript 控制 html元素 顯示/隱藏實(shí)現(xiàn)代碼
- 如何用js控制frame的隱藏或顯示的解決辦法
- Bootstrap顯示與隱藏簡單實(shí)現(xiàn)代碼
相關(guān)文章
js如何將多個json結(jié)構(gòu)組成的字符串轉(zhuǎn)換為數(shù)組？
接口返回的EventStream結(jié)構(gòu)的數(shù)據(jù),由于http流式傳輸時,可能會分段,所以導(dǎo)致本該每次返回一段json數(shù)據(jù)結(jié)構(gòu)的字符串,變成了多個json數(shù)據(jù)結(jié)構(gòu)的字符串拼接在了一起,本文講述js如何將多個json結(jié)構(gòu)組成的字符串轉(zhuǎn)換為數(shù)組2024-08-08
JavaScript實(shí)現(xiàn)開關(guān)等效果
本文給大家分享一段簡單的代碼基于js實(shí)現(xiàn)開關(guān)燈效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
獲取鍵盤控制事件是實(shí)現(xiàn)交互性最有力的方法之一。2008-04-04
這篇文章主要介紹了如何制作自己的原生JavaScript路由，對路由感興趣的同學(xué)，可以參考下2021-05-05
javascript 就地編輯實(shí)現(xiàn)代碼
最近正在看《javascript設(shè)計模式》，其中有一個'就地編輯'的示例，用來表現(xiàn)不同的繼承方式，看完之后想自己憑理解寫一個類似的東西。2010-05-05
用javascript為頁面添加天氣顯示實(shí)現(xiàn)思路及代碼
為頁面添加天氣顯示的方法有很多，在本文為大家介紹下使用js來輕松實(shí)現(xiàn)，具體的代碼如下，感興趣的朋友不要錯過2013-12-12
這篇文章主要介紹了JS解析XML的方法,實(shí)例分析了javascript針對IE瀏覽器與非IE瀏覽器解析XML文件的技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-01-01
three.js中正交與透視投影相機(jī)的實(shí)戰(zhàn)應(yīng)用指南
在three.js中攝像機(jī)的作用就是不斷的拍攝我們創(chuàng)建好的場景,然后通過渲染器渲染到屏幕中,下面這篇文章主要給大家介紹了關(guān)于three.js中正交與透視投影相機(jī)應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-08-08
11個ES13中令人驚嘆的JavaScript新特性總結(jié)
與許多其他編程語言一樣,JavaScript?也在不斷發(fā)展,小編今天就為大家介紹ES13中添加的最新功能,并查看其用法示例以更好地理解它們,有需要的小伙伴可以了解下2023-09-09
微信小程序?qū)崿F(xiàn)的一鍵連接wifi功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的一鍵連接wifi功能,結(jié)合實(shí)例形式分析了微信小程序操作WiFi連接的模塊初始化、配置、連接等相關(guān)操作技巧,需要的朋友可以參考下2019-04-04