javascript 实现数据表格显示的展开与折叠

最新推荐文章于 2022-09-09 10:59:23 发布

happypolo

最新推荐文章于 2022-09-09 10:59:23 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA/JAVA SCRIPT 文章标签： javascript sql div class border function

本文链接：https://blog.youkuaiyun.com/happypolo/article/details/5514415

JAVA/JAVA SCRIPT 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了一种使用JavaScript实现数据表格行的展开和折叠的方法。通过设置对象ID并监听点击事件，当点击带有特定ID的图片时，会切换目标行的显示状态，并更新图片为展开或折叠的箭头图标。内容中提供了ASP/JSP页面的示例代码，展示如何结合SQL查询动态生成表格数据，并实现展开/折叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function ShowTableRow(id)

{
var _Row = document.getElementById(id) 
var _Img = document.getElementById("Img"+id)

if(_Row.style.display=="none")
     {
       _Row.style.display="";
       _Img.src="arrowUP.gif";

     }
else
     {
       _Row.style.display="none";
       _Img.src="arrowDOWN.gif";
     }
}

</script>

*******************************

asp/jsp 页面: 设置对象的 ID

.......................

<td width="14%" bgcolor="#ecfaff" ><div align="center"><img src="arrowDOWN.gif" id="Img<%=num%>" onClick="ShowTableRow(<%=num%>)"></div></td>
     <td width="12%" bgcolor="#ecfaff" class="style11"></td>

</tr>




    <tr class="style11" bgcolor="#66CC99">
    <td colspan="7">
        <div id=<%=num%> style="display:none" >
    <table width="73%" border="0" align="center" cellpadding="0" cellspacing="1" >

    <%
   '-- 根据RS1结果，动态画表格
  sql1="SELECT ORG_CODE,ORG_NAME, count(*) as OUTNUM1 FROM "
  sql1=sql1+" ciginfo where substring(barcode,3,6)='"+ppdm+"' and scandate<='"+enddate&" 23:59:59"+"' and scandate>='"+begindate+"'"
    sql1=sql1+" group by ORG_CODE,ORG_NAME "

rs1.open sql1,connstr,1,1 '---------- 打开汇总结果数据集 ----> RS1

  num1=1
  do while not rs1.eof
  %>

        <tr>
   <td width=48%></td>
   <td width=5%><%=num1%>、</td>
    <td width=10%><%=rs1("ORG_CODE")%></td>
   <td width=35%><div align="left"><%=rs1("ORG_NAME")%> </div> <td>
   <td width=5%><%=rs1("outnum1")%></td>

        </tr>

        <%
  rs1.movenext
  num1=num1+1
  loop

  rs1.close
  %>
      </table>
      </div>
   </td>
   </tr>