堆棧內存溢出
  簡體   English   中英

如何創建帶有可折疊行的表格

[英]How to create table with collapsible rows

 原文  2015-09-09 03:54:21  6   2    javascript/ jquery/ html/ css

問題描述

我正在嘗試創建一個帶有可折疊行的表，並且能夠使用來自 stackoverflow 的代碼，我對其進行了很少的修改以滿足我的需要。 它在jsfiddle1

<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

<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 工作相同，並帶有 + 和 - 符號。

2 個解決方案

解決方案1
 1 已采納  2015-09-09 04:03:34

您需要隱藏/顯示accordion-toggle的下一個tr元素。

因此，應將類accordion-content添加到tr而不是td元素， accordion-content元素也是單擊的toggle元素的父元素的下一個兄弟元素。 

 $(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'); }); })
 .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%; }
 <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>

解決方案2
 0  2015-09-09 04:18:30

您可以為每一行使用唯一的 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>

然后使用 id 調用隱藏行，

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

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在可折疊表格行中添加分頁？ 使用jQuery的可折疊表格行 將可折疊div擴展到表的行 如何在數據表中創建可折疊列標題？ 不使用任何 ID 的表中的可折疊行 根據表值創建可折疊面板Javascript 用更少/更多按鈕創建一個可折疊的表格？ 如何建立可折疊/可擴展的表格行，例如news.google.com 如何在for循環中創建表行 為什么我的帶有可折疊行的嵌套表顯示不正確？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM