变态的表格!变态的rowSpan!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script>
function showDetail(a)
{
//方案1，不修改rowspan，最后一行在隐藏状态下，表格就变形
    var tr=document.getElementById("TR"+a)
    var test=document.getElementById("test")
    var table=document.getElementById("mytable")
    if(tr)
    {
        tr.parentNode.removeChild(tr);//用dom操作阿
    }

}  </script>
</HEAD> <BODY>
  <TABLE id="mytable" border=1>
<TR>
    <TD><input type='button' onclick="showDetail(1)" value="showdetail"></TD>
    <TD rowspan="6" id="test">我占六格</TD>
    <TD>其他1</TD>
</TR>
<TR id="TR1">
    <TD></TD>
    <TD>明细1</TD>
</TR>
<TR>
    <TD><input type='button' onclick="showDetail(2)" value="showdetail"></TD>
    <TD>其他2</TD>
</TR>
<TR id="TR2">
    <TD></TD>
    <TD>明细2</TD>
</TR>
<TR>
    <TD><input type='button' onclick="showDetail(3)" value="showdetail"></TD>
    <TD>其他3</TD>
</TR>
<TR id="TR3">
    <TD></TD>
    <TD>明细3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

感谢LS对我帖子的回复但是，如果单纯的remove掉tr，那么我下一次想要显示这个tr怎么办？我的showDetail的功能是，点击显示明细，再点击隐藏明细
familyX：‘我占六个’，是三个合同的一个公用的属性（BT的需求，同样的属性，要合成为一个单元格）但是，点击行首的img（我这里用了button，实际项目里是img），要显示和隐藏合同明细
下载不了附件
你的table本身就有问题
第一行相当于有8个td
而下面的都是只有2个td
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script>
function showDetail(a)
{
//方案1，修改rowspan，除了最后一行，其他都变形
    var tr=document.getElementById("TR"+a)
    var test=document.getElementById("test")
    var table=document.getElementById("mytable")
    if(tr)
    {
        if(tr.style.display=="none")
        {
            tr.style.display="block"
        }
        else
        {
            tr.style.display="none"
        }
    }
if(a==3){
    var rowspan=0
    for(var i=0;i<table.rows.length;i++)
    {
        if(table.rows[i].style.display=="block"||table.rows[i].style.display=="")
            rowspan++
    }
    test.rowSpan=rowspan
}
}  </script>
</HEAD> <BODY>
  <TABLE id="mytable" border=1>
<TR>
    <TD><input type='button' onclick="showDetail(1)" value="showdetail"></TD>
    <TD rowspan="6" id="test">我占六格</TD>
    <TD>其他1</TD>
</TR>
<TR id="TR1">
    <TD></TD>
    <TD>明细1</TD>
</TR>
<TR>
    <TD><input type='button' onclick="showDetail(2)" value="showdetail"></TD>
    <TD>其他2</TD>
</TR>
<TR id="TR2">
    <TD></TD>
    <TD>明细2</TD>
</TR>
<TR>
    <TD><input type='button' onclick="showDetail(3)" value="showdetail"></TD>
    <TD>其他3</TD>
</TR>
<TR id="TR3">
    <TD></TD>
    <TD>明细3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
如果是隐藏最后一行，要重设rowspan
不是就不用重设
给楼主一个div+css的。<!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=gb2312" />
<title>无标题文档</title>
</head><body>
<script type="text/javascript">
function showDetail(a,b)
{if($(a).style.display=="none")
{
$(a).style.display="block"
$(b).style.display="block"
}
else
{
$(a).style.display="none"
$(b).style.display="none"
}
$("six").height=$("detail").clientWidth;
}
function $(id)
{
return document.getElementById(id);
}
</script><TABLE border=0 cellpadding="0" cellspacing="1" bgcolor="#666666" id="mytable">
<TR>
    <TD bgcolor="#FFFFFF">
<div style="width:600px; float:left">
<div style="width:200px; float:left;">
<div style="width:200px;"><input type='button' onclick="showDetail(1,4)" value="showdetail"></div>
<div id="4" style="width:200px;"></div>
<div style="width:200px;"><input type='button' onclick="showDetail(2,5)" value="showdetail"></div>
<div id="5" style="width:200px;"></div>
<div style="width:200px;"><input type='button' onclick="showDetail(3,6)" value="showdetail"></div>
<div id="6" style="width:200px;"></div>
</div>
<div id="six" style="width:200px; float:left;">我占6格</div>
<div id="detail" style="width:200px; float:left;">
<div id="1" style="width:200px;">明细</div>
<div style="width:200px;">其他</div>
<div id="2" style="width:200px;">明细</div>
<div style="width:200px;">其他</div>
<div id="3" style="width:200px;">明细</div>
<div style="width:200px;">其他</div>
</div>
</div>
</TD>
</TR>
</TABLE>
</body>
</html>
我有n个查询不能都改成div+css的
谢谢ls的div+css，虽然没法子采用谢谢mingxuan，但是这个问题的原因是什么？(判断太麻烦了，牵涉到DWR和其他的一些情况，只能作为最后的手段)
把1楼的改一下
<script>
   var obj = {};
   function showDetail(a){
      var temp = event.srcElement;
      var tr=document.getElementById("TR"+a)
      var test=document.getElementById("test")
      var table=document.getElementById("mytable")
      if(tr){
obj["TR"+a] = tr;
        tr.parentNode.removeChild(tr);
      }else{
temp.parentNode.parentNode.insertBefore(obj["TR"+a]);
      }
   }
</script>
记录一下呗删除的节点，然后在加上去就是了，DIV就是个显示隐藏的过程比较简单，具有结构的table就不是很好搞显示隐藏。
你要是不想表格有变化可以用visibility代替display，用表格想起来头就大。崩溃
找出问题了，是表格的最后一行的tr不能加“dispaly：none”
下面的代码就可以<script type="text/javascript">
function showDetail(a)
{
//方案1，不修改rowspan，最后一行在隐藏状态下，表格就变形
    var tr=document.getElementById("TR"+a)

    var test=document.getElementById("test")
    var table=document.getElementById("mytable")
    if(tr)
    {
        if(tr.style.display=="none")
        {
            tr.style.display="block"
        }
        else
        {
            tr.style.display="none"
        }
    }

}</script><TABLE border=0 cellpadding="1" cellspacing="1" bgcolor="#666666" id="mytable">
<TR>
    <TD bgcolor="#FFFFFF"><input type='button' onclick="showDetail(1)" value="showdetail"></TD>
    <TD rowspan="7" bgcolor="#FFFFFF" id="test">我占六格</TD>
    <TD bgcolor="#FFFFFF">其他1</TD>
</TR>
<TR id="TR1">
    <TD bgcolor="#FFFFFF"></TD>
    <TD bgcolor="#FFFFFF">明细1</TD>
</TR>
<TR>
    <TD bgcolor="#FFFFFF"><input type='button' onclick="showDetail(2)" value="showdetail"></TD>
    <TD bgcolor="#FFFFFF">其他2</TD>
</TR>
<TR id="TR2">
    <TD bgcolor="#FFFFFF"></TD>
    <TD bgcolor="#FFFFFF">明细2</TD>
</TR>
<TR>
    <TD bgcolor="#FFFFFF"><input type='button' onclick="showDetail(3)" value="showdetail"></TD>
    <TD bgcolor="#FFFFFF">其他3</TD>
</TR>
<TR id="TR3">
    <TD bgcolor="#FFFFFF"></TD>
    <TD bgcolor="#FFFFFF">明细3</TD>
</TR>
<TR>
    <TD></TD>
    <TD></TD>
</TR>
</TABLE>
嘿嘿，依照familyX的做法去做了familyX的做法很聪明，虽然是个dirty case不好的地方是：多出来的tr会拉一条线来毕业三年，越来越感觉自己不是做程序的，而是帮公司骗钱的