文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用可折叠行创建表

问如何使用可折叠行创建表
EN

Stack Overflow用户
提问于 2015-09-09 03:54:21
回答 2查看 1.2K关注 0票数 3

我正在尝试创建一个具有可折叠行的表，并且能够使用堆栈溢出的代码，而我很少修改这些代码以满足我的需要。在jsfiddle1

代码语言：javascript
复制
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>CommDesk Dashboard</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".btn1").click(function(){
            $(".expand1").toggle();
        });
        $(".btn2").click(function(){
            $(".expand2").toggle();
        });
    })
</script>

<style>
.expand1 { display: none;
}
.expand2 { display: none;
}

body {
    background-color: AliceBlue;
}
span.note1 {float:left}
span.note2 {font-size:80%}

table#t02, #t02 th, #t02 td {
    border: none;
    border-collapse: collapse;
    font-size:80%;  
}
#button1{
position: absolute;
bottom:10px;
left:50%;
}
</style>
</head>

<body>
<form method="post">
<div style="float:left; width:50%">

<table id="t02" class="table2">
<tr>
    <th></th>
    <th></th>       
    <th style="color:green">Green</th>
    <th style="color:gold", colspan="3">Yellow</th>
    <th></th>
    <th style="color:red">Red</th>    
</tr>
<tr>
    <td class="btn1">Post-IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class="expand1">Alabama</td>
    <td class="expand1">&lt</td>        
    <td class="expand1"><input type="text", name="post_ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class="expand1"><input type="text", name="post_ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class="expand1">to</td>
    <td class="expand1"><input type="text", name="post_ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class="expand1">&gt</td>
    <td class="expand1"><input type="text", name="post_ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
<tr>
    <td class="btn2">IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class="expand2">Alabama</td>
    <td class="expand2">&lt</td>        
    <td class="expand2"><input type="text", name="ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class="expand2"><input type="text", name="ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class="expand2">to</td>
    <td class="expand2"><input type="text", name="ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class="expand2">&gt</td>
    <td class="expand2"><input type="text", name="ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
</table>
<input type="submit" value="Submit" id="button1" />
</div>
</form>
</body>
</html>

这里唯一的问题是，当行被折叠或展开时，我无法得到+和符号。所以，当我试图获得+和-我尝试使用手风琴切换，但在那里，行不是扩大或折叠正确。小提琴在jsfiddle2

代码语言：javascript
复制
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Dashboard</title>

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.info').find('.accordion-toggle').click(function () {
    //Expand or collapse this panel
    $(this).toggleClass("open").next().slideToggle('fast');
    //Hide the other panels
    $(".accordion-toggle").not($(this)).removeClass("open");
    $(".accordion-content").not($(this).next()).slideUp('fast');
});
})

</script>
<style>
.accordion-toggle {
    cursor: pointer;
}
.accordion-content {
    display: none;
}
.accordion-content.default {
    display: block;
}
.accordion-toggle::after {
    content:"+";
}
.accordion-toggle.open::after {
    content:"-";
}

body {
    background-color: AliceBlue;
}
span.note1 {float:left}
span.note2 {font-size:80%}

table#t02, #t02 th, #t02 td {
    border: none;
    border-collapse: collapse;
    font-size:80%;  
}
</style>
</head>
<body>
<form>
<div style="float:left; width:50%" class='info'>
<table id="t02" class="table2">
<tr>
    <th></th>
    <th></th>       
    <th style="color:green">Green</th>
    <th style="color:gold", colspan="3">Yellow</th>
    <th></th>
    <th style="color:red">Red</th>    
</tr>
<tr>
    <td class='accordion-toggle'>Post-IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class='accordion-content'>Alabama</td>
    <td class='accordion-content'>&lt</td>      
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>to</td>
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>&gt</td>
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
<tr>
    <td class='accordion-toggle'>IVR Call Volume</td>
    <td>&lt</td>        
    <td><input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"></td>
    <td><input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"></td>
    <td>to</td>
    <td><input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"></td>
    <td>&gt</td>
    <td><input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr>
    <td align="center" class='accordion-content'>Alabama</td>
    <td class='accordion-content'>&lt</td>      
    <td class='accordion-content'><input type="text", name="ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>to</td>
    <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
    <td class='accordion-content'>&gt</td>
    <td class='accordion-content'><input type="text", name="ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
</table>
</div>
<div style="float:left; width:50%">
Place Holder
</div>
</form>
</body>
</html>

我能得到一些帮助找出我在这里缺少的东西吗？我希望fiddle2的工作和fiddle1一样，在那里有+和-符号。

javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-09-09 04:03:34

您需要隐藏/显示accordion-toggle的下一个accordion-toggle元素。

因此，类accordion-content应该添加到tr中，而不是添加到td元素中，accordion-content元素也是单击toggle元素的父元素的下一个兄弟。

​

代码语言：javascript
复制
$(function() {
  $('.info').find('.accordion-toggle').click(function() {
    //Expand or collapse this panel
    var $content = $(this).toggleClass("open").parent().next().slideToggle('fast');
    //Hide the other panels
    $(".accordion-toggle.open").not(this).removeClass("open");
    $(".accordion-content").not($content).slideUp('fast');
  });
})
代码语言：javascript
复制
.accordion-toggle {
  cursor: pointer;
}
.accordion-content {
  display: none;
}
.accordion-content.default {
  display: block;
}
.accordion-toggle::after {
  content: "+";
}
.accordion-toggle.open::after {
  content: "-";
}
body {
  background-color: AliceBlue;
}
span.note1 {
  float: left
}
span.note2 {
  font-size: 80%
}
table#t02,
#t02 th,
#t02 td {
  border: none;
  border-collapse: collapse;
  font-size: 80%;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form lpformnum="1">
  <div style="float:left; width:50%" class="info">
    <table id="t02" class="table2">
      <tbody>
        <tr>
          <th></th>
          <th></th>
          <th style="color:green">Green</th>
          <th style="color:gold" ,="" colspan="3">Yellow</th>
          <th></th>
          <th style="color:red">Red</th>
        </tr>
        <tr>
          <td class="accordion-toggle">Post-IVR Call Volume</td>
          <td>&lt;</td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_good_high" size="2" maxlength="3">
          </td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_warning_low" size="2" maxlength="3">
          </td>
          <td>to</td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_warning_high" size="2" maxlength="3">
          </td>
          <td>&gt;</td>
          <td>
            <input type="text" ,="" name="post_ivr_call_volume_critical_low" size="2" maxlength="3">
          </td>
        </tr>
        <tr class="accordion-content">
          <td align="center" class="">Alabama</td>
          <td class="">&lt;</td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_good_high_alabama" size="2" maxlength="3" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_warning_low_alabama" size="2" maxlength="3">
          </td>
          <td class="">to</td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_warning_high_alabama" size="2" maxlength="3">
          </td>
          <td class="">&gt;</td>
          <td class="">
            <input type="text" ,="" name="post_ivr_call_volume_critical_low_alabama" size="2" maxlength="3">
          </td>
        </tr>
        <tr>
          <td class="accordion-toggle">IVR Call Volume</td>
          <td>&lt;</td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_good_high" size="2" maxlength="3">
          </td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_warning_low" size="2" maxlength="3">
          </td>
          <td>to</td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_warning_high" size="2" maxlength="3">
          </td>
          <td>&gt;</td>
          <td>
            <input type="text" ,="" name="ivr_call_volume_critical_low" size="2" maxlength="3">
          </td>
        </tr>
        <tr class="accordion-content">
          <td align="center" class="">Alabama</td>
          <td class="">&lt;</td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_good_high_alabama" size="2" maxlength="3">
          </td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_warning_low_alabama" size="2" maxlength="3">
          </td>
          <td class="">to</td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_warning_high_alabama" size="2" maxlength="3">
          </td>
          <td class="">&gt;</td>
          <td class="">
            <input type="text" ,="" name="ivr_call_volume_critical_low_alabama" size="2" maxlength="3">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="float:left; width:50%">Place Holder</div>
</form>

​

票数 1
EN

Stack Overflow用户

发布于 2015-09-09 04:18:30

您可以对每一行使用唯一的id，

代码语言：javascript
复制
<table id="t02" class="table2">
<tr>
    <th></th>
    <th></th>   
    <th style="color:green">Green</th>
  <th style="color:gold", colspan="3">Yellow</th>
  <th></th>
  <th style="color:red">Red</th>    
</tr>
<tr>
    <td class='accordion-toggle' id="1">Post-IVR Call Volume</td>
    <td>&lt</td>    
    <td><input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"></td>
  <td><input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"></td>
  <td>to</td>
  <td><input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"></td>
  <td>&gt</td>
  <td><input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr id='accordion-content-1'>
    <td align="center" class="accordion-content" >Alabama</td>
    <td class='accordion-content'>&lt</td>    
    <td class='accordion-content'><input type="text", name="post_ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>to</td>
  <td class='accordion-content'><input type="text", name="post_ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>&gt</td>
  <td class='accordion-content'><input type="text", name="post_ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
<tr>
    <td class='accordion-toggle' id="2">IVR Call Volume</td>
    <td>&lt</td>    
    <td><input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"></td>
  <td><input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"></td>
  <td>to</td>
  <td><input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"></td>
  <td>&gt</td>
  <td><input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"></td>
</tr>
<tr id='accordion-content-2'>
    <td align="center" class="accordion-content" >Alabama</td>
    <td class='accordion-content'>&lt</td>    
    <td class='accordion-content'><input type="text", name="ivr_call_volume_good_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_low_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>to</td>
  <td class='accordion-content'><input type="text", name="ivr_call_volume_warning_high_alabama", size="2", maxlength="3"></td>
  <td class='accordion-content'>&gt</td>
  <td class='accordion-content'><input type="text", name="ivr_call_volume_critical_low_alabama", size="2", maxlength="3"></td>
</tr>
</table>

然后使用id调用隐藏的行，

代码语言：javascript
复制
$(function() {
$('.info').find('.accordion-toggle').click(function (e) {
        $id = e.target.id;
        $("tr#accordion-content-"+$id+" td").toggle();
    });
})

https://jsfiddle.net/0y91gxtn/1

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32470639

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档