写了段js代码,完整的Htm如下:<html>
<head>
<script language="JavaScript">
function ParentTRClicked2(){
var dgtr = document.getElementsByName('DG');
for(var i=0;i<dgtr.length;i++){
if(dgtr[i].style.display=='none'){
dgtr[i].style.display='table-row';
}
else{
dgtr[i].style.display='none';
}
}}
</script>
</head><body>
<table border="1px">
<tr><th>测试栏</th><tr>
<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>
<tr name="DG"><td>子行</td></tr>
<tr name="DG"><td>子行</td></tr></table>
</body>
</html>
我的意图是通过点击“父行”来隐藏和显示两个“子行”
在Chrome和Firefox中能够看到预想中效果,但在IE中没有反应,估计是兼容性问题
但由于刚开始接触javascript,找不到症结所在,特此发帖请求高手解决。
<head>
<script language="JavaScript">
function ParentTRClicked2(){
var dgtr = document.getElementsByName('DG');
for(var i=0;i<dgtr.length;i++){
if(dgtr[i].style.display=='none'){
dgtr[i].style.display='table-row';
}
else{
dgtr[i].style.display='none';
}
}}
</script>
</head><body>
<table border="1px">
<tr><th>测试栏</th><tr>
<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>
<tr name="DG"><td>子行</td></tr>
<tr name="DG"><td>子行</td></tr></table>
</body>
</html>
我的意图是通过点击“父行”来隐藏和显示两个“子行”
在Chrome和Firefox中能够看到预想中效果,但在IE中没有反应,估计是兼容性问题
但由于刚开始接触javascript,找不到症结所在,特此发帖请求高手解决。
解决方案 »
- javascript 原型方法嵌套了一个对象 问题。。。。
- JS confirm()对话框,如何让光标默认位置在取消按钮上?
- 急急急~~求高手帅男指点啊~
- javascript如何定义一个类
- 如何实现浏览器下载过程中的这两个特殊效果?(内详)
- 怎样解决firefox 内 alert 无法阻塞其他事件流的问题?
- 在JAVASCRIPT中怎么判断CHECKBOX是灰显状态啊.
- 获得父窗体Cookie的问题,有点难度吧....Help me!!!
- 孟子哥哥,请问国内那些网站提供javascript和html的资料、教程
- 在adjunction.html页面点击按钮,弹出新的页面result.html,然后在result.html页面输入新的值后,传递回父页面加数据,并且不刷新?
- IE attachEvent 的问题
- js事件里的注释语句咋写
var table = document.getElementsByTagName('table')[0],
trs = table.getElementsByTagName('tr'),
dgtr = [];
for(var i = 0, len = trs.length; i < len; i++){
var tr = trs[i];
if(tr.name === 'DG'){
dgtr.push(tr);
}
}
for(var i=0;i<dgtr.length;i++){
if(dgtr[i].style.display=='none'){
dgtr[i].style.display='table-row';
}
else{
dgtr[i].style.display='none';
}
}
}
<html>
<head>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ParentTRClicked2() {
var dgtr = $(".cRow");
//var dgtr = document.getElementsByName("DG");
for (var i = 0; i < dgtr.length; i++) {
if (dgtr[i].style.display == 'none') {
dgtr[i].style.display = 'block';
}
else {
dgtr[i].style.display = 'none';
}
}
}
</script>
</head><body>
<table border="1px">
<tr><th>测试栏</th></tr>
<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>
<tr name="DG" class="cRow"><td>子行</td></tr>
<tr name="DG" class="cRow"><td>子行</td></tr></table>
</body>
</html>
<head>
<script>
function ParentTRClicked2(){
var dgtr = [];
if(document.all){
for (var j=0;j<document.all.length;j++ )
{
if(document.all[j].getAttribute("name") == 'DG')
dgtr.push(document.all[j])
}
}else{
dgtr = document.getElementsByName('DG')
}
for(var i=0;i<dgtr.length;i++){
dgtr[i].style.display= (dgtr[i].style.display == 'none' ? 'table-row' : 'none')
}}
</script>
</head><body>
<table border="1px">
<tr><th>测试栏</th><tr>
<tr name="ORG" onclick="ParentTRClicked2()"><td >父行</td></tr>
<tr name="DG"><td>子行</td></tr>
<tr name="DG"><td>子行</td></tr></table>
</body>
</html>
var table = document.getElementsByTagName('table')[0],
trs = table.getElementsByTagName('tr'),
dgtr = [];
for(var i = 0, len = trs.length; i < len; i++){
var tr = trs[i];
if(tr.getAttribute('name') === 'DG'){
dgtr.push(tr);
}
}
for(var i=0;i<dgtr.length;i++){
if(dgtr[i].style.display=='none'){
dgtr[i].style.display='table-row';
}
else{
dgtr[i].style.display='none';
}
}
}
而且复制上去的时候,会提示name不是tr的有效属性
你要实现这个功能的话,你可以将你的两个子行另写成一个Table,然后点击父行隐藏Table
这样好实现一些吧,还有要是用jquery来实现的话那就简单了,非常容易取到对象
document.getElementsByTagName("table")[0]
同样的办法获取........("tr")
然后用tr.getAttribute("name")=="DG"得到