点击展开、折叠，只在谷歌浏览器里管用，为什么？

nf0yxpkdtt 2014-02-13 10:34:03
表格，“类别”列相同的合并显示为一行，点击行首小图标（加减号）实现展开、折叠（各明细行），但只在谷歌浏览器里可实现展开、折叠，用IE和sogou浏览器试了，都不行。
我的代码：在<img>里onclick=foo(类别名称)，然后用JS做foo的处理：对目标行setAttribute('style', 'table-row');或setAttribute('style', 'display:none;');
请假大虾原因。

此外，我希望行首的小图标居中对齐，但在<td>里设置align和valign都无效，可能是CSS的问题，有办法只对这个<td>个性化设置而忽略CSS么？
...全文
841 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
nf0yxpkdtt 2014-02-14
  • 打赏
  • 举报
 回复
前述有点乱，汇总一下就是：#13的源码，放在某html里（如D:\1.html)，用IE没问题，用chrome则只能展开、不能折叠。如果将源码放到thinkphp源码里，原样粘贴到某文件中（如user\index.html)，则在chrome里没问题，在IE里则完全没法用。
诡异问题，请教大虾。

关于客户端能看到的源码，如上图，在IE里打开，右键->“查看源文件”，只能看到左侧列表的HTML源码，至于<table>则没有对应HTML
nf0yxpkdtt 2014-02-14
  • 打赏
  • 举报
 回复
补充一下#13贴的，是在IE里不行，在chrome里没问题。
nf0yxpkdtt 2014-02-14
  • 打赏
  • 举报
 回复
下面是新建某html的源码，点击可实现展开、折叠。但原样复制粘贴到我系统源码里的index.html就不行，我用的是thinkphp的源码。请问可能是哪方面的问题？ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>

<body>
<script language="javascript" type="text/javascript">
document.getElementsByClassName = function(cl) 
{
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var j = 0; j < elem.length; j++) {
		var classes = elem[j].className;
		if (myclass.test(classes)) retnode.push(elem[j]);
	}
	return retnode;
}
function setCookie(sName,sValue) 
{
	var cookieString = sName + "=" + escape(sValue);
	document.cookie = cookieString;
}

function getCookie(sName) 
{
	var aCookie = document.cookie.split("; ");
	for (var j=0; j < aCookie.length; j++){
		var aCrumb = aCookie[j].split("=");
		if (escape(sName) == aCrumb[0])
			return unescape(aCrumb[1]);
	}
	return null;
}

function foo(idx)
{
	var items = document.getElementsByClassName(idx);
	var miniPic = document.getElementById(idx);
	
	for (var j=0; j<items.length; j++) 
	{
		if (getCookie(items[j].getAttribute("id")) == null)
		{
			miniPic.setAttribute('src', 'jian.png');
			items[j].setAttribute('style', 'display:');
			setCookie(items[j].getAttribute("id"), "1");
		}
		else
		{
			if (getCookie(items[j].getAttribute("id")) == 1) {
				miniPic.setAttribute('src', 'jia.png');
				items[j].setAttribute('style', 'display:none;');
				setCookie(items[j].getAttribute("id"), "0");
			} else if (getCookie(items[j].getAttribute("id")) == 0) {
				miniPic.setAttribute('src', 'jian.png');
				items[j].setAttribute('style', 'display:');
				setCookie(items[j].getAttribute("id"), "1");
			} else {
				alert("error");
			}
		}
	}
}
</script>

    <table  border="1">
      <thead>
		<tr>
			<th>A</th>
			<th>B</th>
			<th>C</th>
			<th>D</th>
		</tr>
	  </thead>
	  <tfoot>
            <tr><th></th></tr>
      </tfoot>
		<tbody>
			<tr>
				<td><a href="javascript:void(0)"><img id="123456" onclick="foo(this.id)" src="jia.png" /></a></td>
				<td>totalName</td>
				<td>II</td>
				<td>sum</td>
			</tr>
			<tr class="123456" id="123" style='display:none'>
				<td></td>
				<td>child1</td>
				<td>II</td>
				<td>200</td>
			</tr>
			<tr class="123456" id="124" style='display:none'>
				<td></td>
				<td>child2</td>
				<td>II</td>
				<td>300</td>
			</tr>
		</tbody>
    </table>
</body>
</html>
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
引用 5 楼 showbo 的回复:
发客户端的代码，还有css，发服务器端的没办法测试
我用IE访问页面，在现实表格这个页面，查看源文件，代码里看不到关于表格的内容，只有类似框架的代码。如下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>...</title>
...
<link href="/Public/dwz/themes/default/style.css" rel="stylesheet" type="text/css" />
<link href="/Public/dwz/themes/css/core.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/Public/dwz/themes/css/ieHack.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="/Public/dwz/js/speedup.js" type="text/javascript"></script>
<script src="/Public/dwz/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Public/dwz/js/jquery.cookie.js" type="text/javascript"></script>
<script src="/Public/dwz/js/jquery.validate.js" type="text/javascript"></script>
<script src="/Public/dwz/js/jquery.bgiframe.js" type="text/javascript"></script>
<script src="/Public/xheditor/xheditor-1.1.9-zh-cn.min.js" type="text/javascript"></script>

<script src="/Public/dwz/js/dwz.min.js" type="text/javascript"></script>
<script src="/Public/dwz/js/dwz.regional.zh.js" type="text/javascript"></script>

<script type="text/javascript">
function fleshVerify(){
	//重载验证码
	$('#verifyImg').attr("src", '/index.php/Public/verify/'+new Date().getTime());
}
function dialogAjaxMenu(json){
	dialogAjaxDone(json);
	if (json.statusCode == DWZ.statusCode.ok){
		$("#sidebar").loadUrl("/index.php/Public/menu");
	}
}
function navTabAjaxMenu(json){
	navTabAjaxDone(json);
	if (json.statusCode == DWZ.statusCode.ok){
		$("#sidebar").loadUrl("/index.php/Public/menu");
	}
}
$(function(){
	DWZ.init("/Public/dwz/dwz.frag.xml", {
		loginUrl:"/index.php/Public/login_dialog", loginTitle:"登录",	// 弹出登录对话框
//		loginUrl:"/index.php/Public/login",	//跳到登录页面
		statusCode:{ok:1,error:0},
		pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"_order", orderDirection:"_sort"}, //【可选】
		debug:false,	// 调试模式 【true|false】
		callback:function(){
			initEnv();
			$("#themeList").theme({themeBase:"/Public/dwz/themes"});
		}
	});
});
</script>
</head>

<body scroll="no">
	<div id="layout">
		<div id="header">
			<div class="headerNav">
				<a class="logo" href="/index.php">Logo</a>
				<ul class="nav">
               <!-- <li><a href="/" target="_blank">前台首页</a></li> -->
                    <li><a onclick="testConfirmMsg('/index.php/System/ClearCase')" href="javascript:;" >清理缓存</a></li>
					<script type="text/javascript">
                    function testConfirmMsg(url, data){
                        alertMsg.confirm("您确定要清理缓存文件吗？", {
                            okCall: function(){
                                $.post(url, data, DWZ.ajaxDone, "json");
                            }
                        });
                    }
                    </script>            
					<li><a href="/index.php/Public/main" target="dialog" width="580" height="360" rel="sysInfo">系统消息</a></li>
					<li><a href="/index.php/Public/changepwd/" target="dialog" mask="true">修改密码</a></li>
					<li><a href="/index.php/Public/logout/">退出</a></li>
				</ul>
				<ul class="themeList" id="themeList">
				<!--	<li style="color:#B9CCDA">欢迎你，管理员，这是您的第 38 次登陆</li>  -->
					<li style="color:#B9CCDA">欢迎您，管理员，您是本站的第 39 位访客</li>
					<li theme="default"><div class="selected">蓝色</div></li>
				</ul>
			</div>
		</div>
		
		<div id="leftside">
			<div id="sidebar_s">
				<div class="collapse">
					<div class="toggleCollapse"><div></div></div>
				</div>
			</div>
			<!--菜单栏 start -->
			<div id="sidebar">
				<div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>

				<div class="accordion" fillSpace="sidebar">
                    <!----------------------------------------------------------------------------------->  
                        <div class="accordionHeader">
                            <h2><span>Folder</span>工程管理</h2>
                        </div>
                        <div class="accordionContent">
                            <ul class="tree treeFolder">
                                <li><a href="/index.php/User/summary" target="navTab" rel="sumUser">首页</a></li>
                                <li><a href="/index.php/User/index" target="navTab" rel="indexUser">工程列表</a></li>
                                <li><a href="/index.php/User/add" target="navTab" rel="addUser">添加工程</a></li>
                                <li><a href="/index.php/User/downexcel" target="downexcelUser" targetType="navTab">导出工程</a></li>
                                <li><a href="/index.php/User/import" target="navTab" rel="importUser">导入工程</a></li>
                                <li><a href="/index.php/User/search" target="navTab" rel="searchUser">高级检索</a></li>
                                <li><a href="/index.php/User/advanced" target="navTab" rel="advancedUser">高级功能</a></li>
                            </ul>
                        </div>                                                                                
					</div>
					</div>
					</div>
					
				</div>
			</div>
			<!--菜单栏 end -->
		</div>

		<div id="container">
			<div id="navTab" class="tabsPage">
				<div class="tabsPageHeader">
					<div class="tabsPageHeaderContent"><!-- 显示左右控制时添加 class="tabsPageHeaderMargin" -->
						<ul class="navTab-tab">
							<li tabid="main" class="main"><a href="javascript:void(0)"><span><span class="home_icon">我的主页</span></span></a></li>
						</ul>
					</div>
					<div class="tabsLeft">left</div><!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" -->
					<div class="tabsRight">right</div><!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" -->
					<div class="tabsMore">more</div>
				</div>
				<ul class="tabsMoreList">
					<li><a href="javascript:void(0)">后台主页</a></li>
				</ul>
				<div class="navTab-panel tabsPageContent layoutBox">
					<!--后台首页右边开始 -->		
                    <div style="background:url(/Public/dwz/themes/default/images/adminindex.jpg) center center no-repeat; height:100%; width:100%; background-color:#102947;"></div>
				    <!--后台首页右边结束 -->
				</div>
		  </div>
			</div>
		</div>

	</div>
	
	<div id="footer">Copyright © 2014  <a href="http://www.ha.chinamobile.com" target="_blank">信阳移动网络部全业务信息化支撑班组</a>  网站技术支持：18790092031</div>
</body>
</html>
Go 旅城通票 2014-02-13
  • 打赏
  • 举报
 回复
发客户端的代码，还有css，发服务器端的没办法测试
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
引用 3 楼 showbo 的回复:
这个要看你代码怎么写了，这么说谁也不知道你做了什么处理
<tbody>
<volist name="list" id="ov"> <!-- 每条记录是ov，有多个元素，其中child元素是数组，其各元素存储该“合并”行的明细，可展开 -->
	<tr> <!-- 相同d_code的合并显示行 -->
		<td><a href="javascript:void(0)"><img id="<{$ov.d_code}>" onclick="foo(this.id)" src="jia.png" /></a></td> <!-- 行首小图标：加号或减号 -->
		...<td>...
	</tr>
									
	<volist name="ov.child" id="vv">	<!--上面合并显示行所对应的子行，默认不显示，点击img则显示-->
	<tr target="s_id" rel="<{$ov.id}>" id="<{$vv.id}>" name="<{$vv.d_code}>" style='display:none;'>
		...<td>...
	</tr>
	</volist>
</volist>
...
function foo(idx)
{
	var items = document.getElementsByName(idx);
	var miniPic = document.getElementById(idx);
	for (var j=0; j<items.length; j++) 
	{
		if (getCookie(items[j].getAttribute("id")) == null) 	//第一次点击
		{
//			miniPic.setAttribute('src', '__PUBLIC__/Images/jian.png');
//			items[j].setAttribute('style', 'table-row');
			miniPic.src = '__PUBLIC__/Images/jian.png';
			items[j].style.display = 'table-row';
			setCookie(items[j].getAttribute("id"),1);
		}
		else	//不是第一次点击，已有cookie
		{
			if (getCookie(items[j].getAttribute("id")) == 1) {	//已展开
//				miniPic.setAttribute('src', '__PUBLIC__/Images/jia.png');
//				items[j].setAttribute('style', 'display:none;');
				miniPic.src = '__PUBLIC__/Images/jia.png';
				items[j].style.display = 'none';
				setCookie(items[j].getAttribute("id"),0);
			} else {
//				miniPic.setAttribute('src', '__PUBLIC__/Images/jian.png');
//				items[j].setAttribute('style', 'table-row');
				miniPic.src = '__PUBLIC__/Images/jian.png';
				items[j].style.display = 'table-row';
				setCookie(items[j].getAttribute("id"),1);
			}
		}
	}
}
请帮忙看看
Go 旅城通票 2014-02-13
  • 打赏
  • 举报
 回复
这个要看你代码怎么写了，这么说谁也不知道你做了什么处理
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
引用 1 楼 showbo 的回复:
设置style要用 xxx.style.display，不用setAttribute，这个是设置自定义属性的
刚试了，还是不行。而且试之前又出现个奇怪问题：行首的小图标没了，但谷歌浏览器显示依然正常。
Go 旅城通票 2014-02-13
  • 打赏
  • 举报
 回复
设置style要用 xxx.style.display，不用setAttribute，这个是设置自定义属性的
Go 旅城通票 2014-02-13
  • 打赏
  • 举报
 回复
#6就没有foo函数 <volist name="list" id="ov"> <!-- 每条记录是ov，有多个元素，其中child元素是数组，其各元素存储该“合并”行的明细，可展开 --> <tr> <!-- 相同d_code的合并显示行 --> <td><a href="javascript:void(0)"><img id="<{$ov.d_code}>" onclick="foo(this.id)" src="jia.png" /></a></td> <!-- 行首小图标：加号或减号 --> ...<td>... </tr> <volist name="ov.child" id="vv"> <!--上面合并显示行所对应的子行，默认不显示，点击img则显示--> <tr target="s_id" rel="<{$ov.id}>" id="<{$vv.id}>" name="<{$vv.d_code}>" style='display:none;'> ...<td>... </tr> </volist> </volist> 这种类似的html也没用。。
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
贴类似代码如下，请高手指教。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>展开测试</title>
</head>

<body>
<script language="javascript" type="text/javascript">
function setCookie(sName,sValue,expireHours) 
{
	var cookieString = sName + "=" + escape(sValue);
	//;判断是否设置过期时间
	if (expireHours>0) {
		var date = new Date();
		date.setTime(date.getTime + expireHours * 3600 * 1000);
		cookieString = cookieString + "; expire=" + date.toGMTString();
	}
	document.cookie = cookieString;
}

function getCookie(sName) 
{
	var aCookie = document.cookie.split("; ");
	for (var j=0; j < aCookie.length; j++){
		var aCrumb = aCookie[j].split("=");
		if (escape(sName) == aCrumb[0])
			return unescape(aCrumb[1]);
	}
	return null;
}

function foo(idx)
{
	var items = document.getElementsByName(idx);
	var miniPic = document.getElementById(idx);
	for (var j=0; j<items.length; j++) 
	{
		if (getCookie(items[j].getAttribute("id")) == null) 	//第一次点击
		{
			miniPic.setAttribute('src', 'jian.png');
			items[j].setAttribute('style', 'display:');
			setCookie(items[j].getAttribute("id"),1);
		}
		else	//不是第一次点击，已有cookie
		{
			if (getCookie(items[j].getAttribute("id")) == 1) {	//已展开
				miniPic.setAttribute('src', 'jia.png');
				items[j].setAttribute('style', 'display:none;');
				setCookie(items[j].getAttribute("id"),0);
			} else {
				miniPic.setAttribute('src', 'jian.png');
				items[j].setAttribute('style', 'display:');
				setCookie(items[j].getAttribute("id"),1);
			}
		}
	}
}
</script>

    <table>
      <thead>
		<tr>
			<th></th>
			<th>名称</th>
			<th>类型</th>
			<th>数量</th>
		</tr>
	  </thead>
	  <tfoot>
            <tr><th></th></tr>
      </tfoot>
		<tbody>
			<tr>
				<td><a href="javascript:void(0)"><img id="1001" onclick="foo(this.id)" src="jia.png" /></a></td>
				<td>合并显示名称</td>
				<td>II</td>
				<td>数量和</td>
			</tr>
			<tr target="s_id" rel="55" id="55" name="1001" style='display:none'>
				<td></td>
				<td>子行1</td>
				<td>II</td>
				<td>200</td>
			</tr>
			<tr target="s_id" rel="56" id="56" name="1001" style='display:none'>
				<td></td>
				<td>子行2</td>
				<td>II</td>
				<td>300</td>
			</tr>
		</tbody>
    </table>

</body>
</html>
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
引用 9 楼 showbo 的回复:
你发的代码和你的自己描述的不一样啊，发错了吧
没发错，4楼的代码，style.display设置为"table-row"或""我都试过了，在chrome里效果一样。 现在是点击行首的“加号”小图标后：在chrome里，加号变为减号，同时隐藏的行会展开；在IE浏览器里，加号会变为减号，但隐藏的行却不会展开。这说明JS的onclick=foo()执行了，但在IE里style.display被重置后却未能体现在页面上。
Go 旅城通票 2014-02-13
  • 打赏
  • 举报
 回复
你发的代码和你的自己描述的不一样啊，发错了吧
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
在IE里items[j].style.display = "";或items[j].style.display = "table-row";都不显示，在谷歌浏览器里可以正常显示。为什么？
nf0yxpkdtt 2014-02-13
  • 打赏
  • 举报
 回复
如此冷清…… 自己顶一下
PowerBI系列之可视化技能专题
向报表添加文本框和形状 可视化技能 使用编辑交互功能来控制图表联动 多层联动中控制使用Control Click 切片器的使用 同步切片器 折叠切片器 给切片器设定默认值 给切片器设定动态默认值（DAX函数-默认当前月或天）...
谷歌浏览器javascript调试教程
你可以直接在页面上点击右键，然后选择审查元素： 或者在Chrome的工具中找到： 或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。 打开的开发者工具就长下面...
30个极致实用的谷歌浏览器插件，让你开发事半功倍
浏览器是开发人员最强大的工具。99% 的人不会 100% 地利用他们的浏览器。这里有 30 个浏览器扩展，如果你能合理充分利用将大大提升你的开发效率。...安装好插件后，在浏览网页时，只需将鼠标移动到...
Linux上适用于开发者的几个强大Chrome插件
它可以将复杂的JSON数据结构转换为易于阅读和理解的树状结构，提供了展开和折叠节点的功能，以及语法高亮显示。在开发者的日常工作中，Chrome插件是一种非常有用的工具，可以提供各种功能和增强开发体验。Octotree是...
实用且堪称神器的Chrome插件推荐
前言 相信很多人都在使用 Chrome 浏览器，其流畅的浏览体验得到了不少...最近为了更好的利用谷歌浏览器，博主整理了一些常用的谷歌插件，分享给大家，考虑到一些无法翻墙的童鞋，给力的博主当然是顺便给出离线安装...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章