在线等~~~ 关于 JS 操作 TABLE的TR 样式的问题...

TimLeaf 2008-12-03 09:17:47 


<HTML>

<head>

	<script language="javascript">

	function showDetail(oSpan)

	{

		var iIndex = oSpan.parentNode.parentNode.rowIndex;

		var oTbody = oSpan.parentNode.parentNode.parentNode;

		if (oSpan.innerText == "+")

		{

			oTbody.rows[iIndex + 1].style.display = "";

			oTbody.rows[iIndex + 2].style.display = "";

			oTbody.rows[iIndex + 3].style.display = "";

			oSpan.innerText = "-";

		}

		else

		{

			oTbody.rows[iIndex + 1].style.display = "none";

			oTbody.rows[iIndex + 2].style.display = "none";

			oTbody.rows[iIndex + 3].style.display = "none";

			oSpan.innerText = "+";

		}

	}

	</script>

</head>

<body>

<TABLE border=1>

<TBODY>

	<TR id=1>

		<TD rowSpan=20> </TD>

		<TD rowSpan=20></TD>

		<TD rowSpan=20>AAAAA</TD>

		<TD>1 VS 2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=2 style="DISPLAY: none">

		<TD>    a</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=3 style="DISPLAY: none">

		<TD>    b</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=4 style="DISPLAY: none">

		<TD>    c</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=5>

		<TD>1 VS 2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=6 style="DISPLAY: none">

		<TD>    a</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=7 style="DISPLAY: none">

		<TD>    b</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=8 style="DISPLAY: none">

		<TD>    c</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=9>

		<TD>1 VS 3<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=10 style="DISPLAY: none">

		<TD>    a</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=11 style="DISPLAY: none">

		<TD>    b</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=12 style="DISPLAY: none">

		<TD>    c</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=13>

		<TD>1 VS 4<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=14 style="DISPLAY: none">

		<TD>    a</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=15 style="DISPLAY: none">

		<TD>    b</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=16 style="DISPLAY: none">

		<TD>    c</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=17>

		<TD>1 VS 5<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=18 style="DISPLAY: none">

		<TD>    a</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=19 style="DISPLAY: none">

		<TD>    b</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

	<TR id=20 style="DISPLAY: none">

		<TD>    c</TD>

		<TD>/</TD>

		<TD>/</TD>

	</TR>

</TBODY>

</TABLE>

</body>

</HTML>

以上代码，当点击<span>中的+号时，会展开或收缩几行...这是通过控制display来实现的。
不过，现在有个问题 第一行中有rowSpan=20，当操作最后一行的display = none时，rowSpan就会失效...
求解决方法...
...全文
966 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
一弗楚 2008-12-03
  • 打赏
  • 举报
 回复
<HTML>
<head>
<script language="javascript">
function showDetail(oSpan)
{
var iIndex = oSpan.parentNode.parentNode.rowIndex;
var oTbody = oSpan.parentNode.parentNode.parentNode;
if (oSpan.innerText == "+")
{
oTbody.rows[iIndex + 1].style.display = "";
oTbody.rows[iIndex + 2].style.display = "";
oTbody.rows[iIndex + 3].style.display = "";
oSpan.innerText = "-";
}
else
{
oTbody.rows[iIndex + 1].style.display = "none";
oTbody.rows[iIndex + 2].style.display = "none";
oTbody.rows[iIndex + 3].style.display = "none";
oSpan.innerText = "+";
}
}
</script>
</head>
<body>
<table border=1>
<tr>
<td valign=top>
<table border=1 height=20>
<tr>
<TD> </TD>
<TD></TD>
<TD>AAAAA</TD>
</tr>
</table>
</td>
<td>
<TABLE border=1>
<TBODY>
<TR id=1>
<TD>1 VS 2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=2 style="DISPLAY: none">
<TD>    a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=3 style="DISPLAY: none">
<TD>    b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=4 style="DISPLAY: none">
<TD>    c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=5>
<TD>1 VS 2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=6 style="DISPLAY: none">
<TD>    a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=7 style="DISPLAY: none">
<TD>    b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=8 style="DISPLAY: none">
<TD>    c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=9>
<TD>1 VS 3<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=10 style="DISPLAY: none">
<TD>    a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=11 style="DISPLAY: none">
<TD>    b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=12 style="DISPLAY: none">
<TD>    c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=13>
<TD>1 VS 4<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=14 style="DISPLAY: none">
<TD>    a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=15 style="DISPLAY: none">
<TD>    b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=16 style="DISPLAY: none">
<TD>    c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=17>
<TD>1 VS 5<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=18 style="DISPLAY: none">
<TD>    a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=19 style="DISPLAY: none">
<TD>    b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=20 style="DISPLAY: none">
<TD>    c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
</TBODY>
</TABLE>
</td>
</tr>
</table>

</body>
</HTML>

这样行不行
TimLeaf 2008-12-03
  • 打赏
  • 举报
 回复 


    <TR id=21 style="DISPLAY: none" height=0>

        <TD></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

这个改成~


    <TR id=21 height=0>

    </TR>

这样就可以了吧...
谢谢了~
满衣兄 2008-12-03
  • 打赏
  • 举报
 回复
多加一行,高度设置为0隐藏就行了。


<HTML>

<head>

    <script language="javascript">

    function showDetail(oSpan)

    {

        var iIndex = oSpan.parentNode.parentNode.rowIndex;

        var oTbody = oSpan.parentNode.parentNode.parentNode;

        if (oSpan.innerText == "+")

        {

            oTbody.rows[iIndex + 1].style.display = "";

            oTbody.rows[iIndex + 2].style.display = "";

            oTbody.rows[iIndex + 3].style.display = "";

            oSpan.innerText = "-";

        }

        else

        {

            oTbody.rows[iIndex + 1].style.display = "none";

            oTbody.rows[iIndex + 2].style.display = "none";

            oTbody.rows[iIndex + 3].style.display = "none";

            oSpan.innerText = "+";

        }

    }

    </script>

</head>

<body>

<TABLE border=1>

<TBODY>

    <TR id=1>

        <TD rowSpan=21> </TD>

        <TD rowSpan=21></TD>

        <TD rowSpan=21>AAAAA</TD>

        <TD>1 VS 2<SPAN style="cursor:hand;" onclick="showDetail



(this)">+</SPAN></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=2 style="DISPLAY: none">

        <TD>    a</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=3 style="DISPLAY: none">

        <TD>    b</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=4 style="DISPLAY: none">

        <TD>    c</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=5>

        <TD>1 VS 2<SPAN style="cursor:hand;" onclick="showDetail



(this)">+</SPAN></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=6 style="DISPLAY: none">

        <TD>    a</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=7 style="DISPLAY: none">

        <TD>    b</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=8 style="DISPLAY: none">

        <TD>    c</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=9>

        <TD>1 VS 3<SPAN style="cursor:hand;" onclick="showDetail



(this)">+</SPAN></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=10 style="DISPLAY: none">

        <TD>    a</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=11 style="DISPLAY: none">

        <TD>    b</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=12 style="DISPLAY: none">

        <TD>    c</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=13>

        <TD>1 VS 4<SPAN style="cursor:hand;" onclick="showDetail



(this)">+</SPAN></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=14 style="DISPLAY: none">

        <TD>    a</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=15 style="DISPLAY: none">

        <TD>    b</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=16 style="DISPLAY: none">

        <TD>    c</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=17>

        <TD>1 VS 5<SPAN style="cursor:hand;" onclick="showDetail



(this)">+</SPAN></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=18 style="DISPLAY: none">

        <TD>    a</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=19 style="DISPLAY: none">

        <TD>    b</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=20 style="DISPLAY: none">

        <TD>    c</TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

    <TR id=21 style="DISPLAY: none" height=0>

        <TD></TD>

        <TD>/</TD>

        <TD>/</TD>

    </TR>

</TBODY>

</TABLE>

</body>

</HTML>
TimLeaf 2008-12-03
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 ahywg 的回复:]
当操作最后一行的display = none时，rowSpan就会失效

这里不是失效，实际上当最后一个打开时才是正常的表格，你可以用ＤＩＶ去做，用表格是不太好控制的
[/Quote]
谢谢了~可是必须目前...用table因为数据量远比上面的代码多的多~
一弗楚 2008-12-03
  • 打赏
  • 举报
 回复
当操作最后一行的display = none时，rowSpan就会失效

这里不是失效，实际上当最后一个打开时才是正常的表格，你可以用ＤＩＶ去做，用表格是不太好控制的
zjybushiren88888 2008-12-03
  • 打赏
  • 举报
 回复
关注，帮楼主顶
bootstrap table表格使用方法详解
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下 1.进入页面，根据指定的URL加载数据(json格式) 2.加载成功，根据$table.bootstrapTable({options})显示表格样式。 感觉还是挺漂亮的哈，OK，下面贴代码解释功能。  开始之前，当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /> <link h
js控制表单奇偶行样式的简单方法
一、如果使用JQuery的话可以直接JQuery的 代码如下:　　$(“tr:odd”).addClass(“clazzName”);　　$(“tr:even”).addClass(“clazzName”);　　二、如果是使用纯js的话　　1.先获取table标签，var table = document.getElementById()　　2.再获取里面的tbody标签var tbody = table.getElementsByTagName(“tbody”)[0]　　3.再获取tr标签var trs = tbody.getElementsByTagName(“tr”)　　4.然后迭代tr
javascript之通用简单的table选项卡实现(二)
回归原始，当样式切换后，把控制权还给页面，即table.js仅控制切换样式和记录操作： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>New Web Project</t
js 设置选中行的样式的实现代码
代码如下://设置选中的行样式。 function SetSelectTrClass(seltr, selclass, unselclass) { var thetable = seltr.parentElement; //i从1开始是因为列名的样式不变 for (var i = 1; i < thetable.rows.length; i++) { var tr = thetable.rows[i]; tr.className = unselclass; } seltr.className = selclass; }
javascript 控制 html元素 显示/隐藏实现代码
1。编写js函数 [removed] function display(y){$(y).style.display=($(y).style.display==”none”)?””:”none”;} function $(s){return document.getElementById(s);} [removed] 2. 要显示/隐藏的html元素加上 id 属性 控制这个tr的显示/隐藏 3，添加按钮，链接等触发 js 函数 <input type=”b
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

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

+ 用AI写文章