Javascript 如何创建具有可折叠行的表_Javascript_Jquery_Html_Css

Javascript 如何创建具有可折叠行的表

javascript jquery html css

Javascript 如何创建具有可折叠行的表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个具有可折叠行的表，并且能够使用stackoverflow中的代码，我对这些代码进行了少量修改，以满足我的需要。在 CommDesk仪表板 $（文档）.ready（函数（）{ $（“.btn1”）。单击（函数（）{ $（“.expand1”）.toggle（）； }); $（“.btn2”）。单击（函数（）{ $（“.expand2”）.toggle（）； }); }) .expand1{显示：无； } .expand2{显示：无； } 身体{ 背景色：AliceBlue； }

我正在尝试创建一个具有可折叠行的表，并且能够使用stackoverflow中的代码，我对这些代码进行了少量修改，以满足我的需要。在


CommDesk仪表板
$（文档）.ready（函数（）{
$（“.btn1”）。单击（函数（）{
$（“.expand1”）.toggle（）；
});
$（“.btn2”）。单击（函数（）{
$（“.expand2”）.toggle（）；
});
})
.expand1{显示：无；
}
.expand2{显示：无；
}
身体{
背景色：AliceBlue；
}
span.note1{float:left}
span.note2{字体大小：80%}
表#t02、#t02 th、#t02 td{
边界：无；
边界塌陷：塌陷；
字号：80%；
}
#按钮1{
位置：绝对位置；
底部：10px；
左：50%；
}
绿色
黄色的
红色
IVR后通话量
&中尉
到
&燃气轮机
阿拉巴马州
&中尉
到
&燃气轮机
IVR呼叫量
&中尉
到
&燃气轮机
阿拉巴马州
&中尉
到
&燃气轮机

这里唯一的问题是，当行折叠或展开时，我无法获得+和-符号。因此，在尝试获取+和-时，我尝试使用手风琴切换，但行没有正确展开或折叠。小提琴正在演奏


仪表板
$（函数（）{
$（'.info'）。查找（'.accordion toggle'）。单击（函数（）{
//展开或折叠此面板
$（this.toggleClass（“open”）.next（）.slideToggle（“fast”）；
//隐藏其他面板
$（“.accordion toggle”）.not（$（this））.removeClass（“open”）；
$（“.accordion content”）.not（$（this.next（））.slideUp（'fast'）；
});
})
.手风琴拨动{
光标：指针；
}
·手风琴内容{
显示：无；
}
.accordion-content.default{
显示：块；
}
.手风琴切换：：之后{
内容：“+”；
}
.手风琴切换.打开：：之后{
内容：“-”；
}
身体{
背景色：AliceBlue；
}
span.note1{float:left}
span.note2{字体大小：80%}
表#t02、#t02 th、#t02 td{
边界：无；
边界塌陷：塌陷；
字号：80%；
}
绿色
黄色的
红色
IVR后通话量
&中尉
到
&燃气轮机
阿拉巴马州
&中尉
到
&燃气轮机
IVR呼叫量
&中尉
到
&燃气轮机
阿拉巴马州
&中尉
到
&燃气轮机
占位符

能帮我找到我在这里遗漏了什么吗？我希望fiddle2与fiddle1一样工作，并在那里有+和-符号。

您需要隐藏/显示

手风琴切换的下一个tr
元素
因此类手风琴内容
应该添加到tr
而不是td
元素，而且手风琴内容
元素是单击的切换
元素父元素的下一个同级

$（函数（）{
$（'.info'）。查找（'.accordion toggle'）。单击（函数（）{
//展开或折叠此面板
var$content=$（this.toggleClass（“打开”）.parent（）.next（）.slideToggle（“快速”）；
//隐藏其他面板
$（“.accordion toggle.open”）.not（this.removeClass（“open”）；
$（“.accordion content”）.not（$content.slideUp（'fast'）；
});
})
。手风琴切换{
光标：指针；
}
·手风琴内容{
显示：无；
}
.accordion-content.default{
显示：块；
}
.手风琴切换：：之后{
内容：“+”；
}
.手风琴切换.打开：：之后{
内容：“-”；
}
身体{
背景色：AliceBlue；
}
附注1{
浮动：左
}
span.note2{
字号：80%
}
表t02，
#t02日，
#t02 td{
边界：无；
边界塌陷：塌陷；
字号：80%；
}

绿色
黄色的
红色
IVR后通话量
到
阿拉巴马州
到
IVR呼叫量
到
阿拉巴马州
到
占位符
您可以为每行使用唯一的id
<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>

谢谢Arun和kangaswad。这正是我想要的。不过，在一个查询中，第二行（阿拉巴马州）的文本区域中绿色列下有一个元素。这是重要的事情还是我们可以删除它。我正在研究你的建议，以便理解它。谢谢。@300如果你不需要的话，你可以把它拿走
<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>

<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>

$(function() {
$('.info').find('.accordion-toggle').click(function (e) {
        $id = e.target.id;
        $("tr#accordion-content-"+$id+" td").toggle();
    });
})