隐藏行的代码

最新推荐文章于 2022-07-25 11:35:41 发布

atq9

最新推荐文章于 2022-07-25 11:35:41 发布

阅读量434

点赞数

分类专栏： WEB 文章标签： button border table html 文档

本文链接：https://blog.csdn.net/jk007/article/details/7483478

版权

WEB 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<title>无标题文档 </title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr>
    <td>姓名 </td>
    <td>性别 </td>
    <td>年龄 </td>
    <td>学科 </td>
    <td>分数 </td>
</tr>
<tr>
    <td>张强 </td>
    <td>男 </td>
    <td>22 </td>
    <td>数学 </td>
    <td>90 </td>
</tr>
<tr>
    <td>张三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>数学 </td>
    <td>90 </td>
</tr>
<tr>
    <td>张三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>语文 </td>
    <td>70 </td>
</tr>
<tr>
    <td>张三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>英语 </td>
    <td>60 </td>
</tr>
<tr>
    <td>李四 </td>
    <td>女 </td>
    <td>19 </td>
    <td>数学 </td>
    <td>60 </td>
</tr>
<tr>
    <td>李四 </td>
    <td>女 </td>
    <td>19 </td>
    <td>语文 </td>
    <td>60 </td>
</tr>
<tr>
    <td>王五 </td>
    <td>男 </td>
    <td>19 </td>
    <td>英语 </td>
    <td>60 </td>
</tr>
</table>
<script >
    var tab=document.getElementById("tab");
    var name="";
    for(var i=0,j=0;i <tab.rows.length;i++,j++) {
        if(name==tab.rows[i].cells[0].innerHTML) {
            tab.rows[i].deleteCell(0)
        } else {
            name=tab.rows[i].cells[0].innerHTML;
            if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
            j=0;
        }
    }

</script >
<script language="javascript">
function HideTr()
   {
var tab=document.getElementById("tab");
for(var i=0;i <tab.rows.length;i++) {
      var cell = tab.rows[i].cells[0];
      if(cell.rowSpan > 1)
      {
               //cell.rowSpan = 1;

      }
        }
if(tab.rows[2].style.display == "")
{
  tab.rows[2].style.display = "none";
  tab.rows[3].style.display = "none";
  tab.rows[4].style.display = "none";
}else{

  tab.rows[2].style.display = "";
  tab.rows[3].style.display = "";
  tab.rows[4].style.display = "";
  tab.rows[2].cells[0].rowSpan = 3;
}

    }
</script>
<input type="button" value=OK οnclick="HideTr()" />
</body>
</html>