表格折叠的实现_html 可折叠表格-优快云博客

本文链接：https://blog.youkuaiyun.com/fortunatelx/article/details/106672428

本文介绍了一种使用JavaScript实现的表格数据展示方法，通过点击按钮可以展开或折叠详细数据行，适用于销售统计数据展示，提高了数据查看的效率。

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

效果图：传不上去？。。。。
function fold(sender){
    var dataValue=$(sender).attr("dataValue");
    if ($(sender).html() == "+"){
        $(sender).html("-");
        $("[name="+dataValue+"]").removeClass("fn-hide");
    } else {
        $(sender).html("+");
        $("[name="+dataValue+"]").addClass("fn-hide");
    }
}

<script type="text/html" id="statisTableTemplate">
    <thead>
    <tr>
        <th>日期</th>
        <th>顾问</th>
        <th>新增线索</th>
<#--        <th>去重线索</th>-->
        <th>跟进线索</th>
        <th>有效线索</th>
        <th>有效线索率</th>
        <th>邀约到店量</th>
        <th>邀约到店率</th>
        <th>战败线索</th>
        <th>战败率</th>
    </tr>
    </thead>
    <% for (var item in Data.list) { %>
    <tr>
        <td><a href="javascript:void(0);" onclick="fold(this)" dataValue="<%=Data.list[item].reportDate%>" class="grey vm mr5 font-20">+</a><span class="vm"><%=Data.list[item].reportDate%></span></td>
        <td><%=Data.list[item].salesName%></td>
        <td><%=Data.list[item].newOrderCount%></td>
<#--        <td><%=Data.list[item].newMobileCount%></td>-->
        <td><%=Data.list[item].callerOrderCount%></td>
        <td><%=Data.list[item].effectiveOrderCount%></td>
        <td><%=Data.list[item].effectiveOrderCountRate%>%</td>
        <td><%=Data.list[item].planTodealerOrderCount%></td>
        <td><%=Data.list[item].planTodealerOrderCountRate%>%</td>
        <td><%=Data.list[item].orderCustomerState3Sum%></td>
        <td><%=Data.list[item].orderCustomerState3SumRate%>%</td>
    </tr>
    <tbody name="<%=Data.list[item].reportDate%>" class="fn-hide">
    <% for (var data in Data.list[item].list) { %>
    <tr>
        <% if (data==0) { %>
        <td rowspan="<%=Data.list[item].listSize%>">&nbsp;</td>
        <% } %>
        <td><%=Data.list[item].list[data].salesName%></td>
        <td><%=Data.list[item].list[data].newOrderCount%></td>
<#--        <td><%=Data.list[item].list[data].newMobileCount%></td>-->
        <td><%=Data.list[item].list[data].callerOrderCount%></td>
        <td><%=Data.list[item].list[data].effectiveOrderCount%></td>
        <td><%=Data.list[item].list[data].effectiveOrderCountRate%>%</td>
        <td><%=Data.list[item].list[data].planTodealerOrderCount%></td>
        <td><%=Data.list[item].list[data].planTodealerOrderCountRate%>%</td>
        <td><%=Data.list[item].list[data].orderCustomerState3Sum%></td>
        <td><%=Data.list[item].list[data].orderCustomerState3SumRate%>%</td>
    </tr>
    <% } %>
    </tbody>
    <% } %>
</script>