切換嵌套表列-html，jQuery

我對jQuery比較新，但使用html和css更經驗豐富。切換嵌套表列-html，jQuery

我目前正在創建一個新的報告，顯示每季度結果的嵌套表。 Sample Quarterly Report 當用戶點擊Q1或Q2表格行旁邊的img時 - 我的期望值爲本週（wk 1 - wk n）列，以根據需要隱藏/顯示（切換）。此外，當隱藏周列時，我希望Quartely列可以摺疊並動態顯示隱藏星期（wk1 - wkn）的總和。大部分的代碼是從其他帖子借來的，但不幸的是，我無法找到一個崩潰和總結嵌套列。

在此先感謝您的幫助！

$(document).ready(function() { 
 
    
 
var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png"; 
 
var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"; 
 

 
    var sum1 = 0; 
 
    $('tr').find('.combat1').each(function() { 
 
     var combat1 = $(this).text(); 
 
     if (!isNaN(combat1) && combat1.length !== 0) { 
 
      sum1 += parseFloat(combat1); 
 
     } 
 
    }); 
 
    var sum2 = 0; 
 
    $('tr').find('.combat2').each(function() { 
 
     var combat2 = $(this).text(); 
 
     if (!isNaN(combat2) && combat2.length !== 0) { 
 
      sum2 += parseFloat(combat2); 
 
     } 
 
    }); 
 
    var sum3 = 0; 
 
    $('tr').find('.combat3').each(function() { 
 
     var combat3 = $(this).text(); 
 
     if (!isNaN(combat3) && combat3.length !== 0) { 
 
      sum3 += parseFloat(combat3); 
 
     } 
 
    }); 
 

 
    $('.total-combat1').html(sum1); 
 
    $('.total-combat2').html(sum2); 
 
    $('.total-combat3').html(sum3); 
 
     
 
    $('.header').click(function() { 
 
       //$('td:nth-child(2)').hide(); 
 
       // if your table has header(th), use this 
 
       $('td:nth-child(2),th:nth-child(2)').toggle(); 
 
      }); 
 
      
 
});

body { 
 
    background: #80dfff; 
 
    color: #d5d4d4; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 12px; 
 
    margin: 0; 
 
    overflow-x: auto; 
 
    padding: 30px; 
 
} 
 
table { 
 
    background: white; 
 
    border-collapse: collapse; 
 
    border: 1px #393939 solid; 
 
    color: black; 
 
    margin: 1em 1em 1em 0; 
 
} 
 
thead { 
 
    border-collapse: collapse; 
 
    color: black; 
 
} 
 
th, td { 
 
    border: 1px #aaa solid; 
 
    padding: 0.2em; 
 
}

<table> 
 
    <thead> 
 
    <tr><th colspan=8>2015</th></tr> 
 
    <tr><th colspan=4 class="header">Q1 
 
    <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /> 
 
     </th> 
 
     <th colspan=3 class="header">Q2 
 
    <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /> 
 
     </th> 
 
     
 
     <th></th> 
 
    </tr> 
 
     <tr> 
 
      <th>WK1</th> 
 
      <th>WK2</th> 
 
      <th>WK3</th> 
 
      <th>WK4</th> 
 
      
 
      <th>WK1</th> 
 
      <th>WK2</th> 
 
      <th>WK3</th> 
 
      <th>Total</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td class="combat1">8170</td> 
 
      <td class="combat1">6504</td> 
 
      <td class="combat1">6050</td> 
 
      <td class="combat1">6050</td> 
 
      
 
      <td class="combat1">7050</td> 
 
      <td class="combat1">7050</td> 
 
      <td class="combat1">7050</td> 
 
      
 
      <td class="total-combat1"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="combat2">8500</td> 
 
      <td class="combat2">10200</td> 
 
      <td class="combat2">7650</td> 
 
      <td class="combat2">7650</td> 
 
      
 
      <td class="combat2">8650</td> 
 
      <td class="combat2">8650</td> 
 
      <td class="combat2">8650</td> 
 
      
 
      <td class="total-combat2"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="combat3">9185</td> 
 
      <td class="combat3">5515</td> 
 
      <td class="combat3">6185</td> 
 
      <td class="combat3">7185</td> 
 
      
 
      <td class="combat3">9185</td> 
 
      <td class="combat3">9185</td> 
 
      <td class="combat3">9185</td> 
 
      
 
      <td class="total-combat3"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

來源

2016-01-22 kBoni

如果你需要切換Q1或Q2的知名度，你可以爲了獲得在下面的代碼片段產生的效果改變標題單擊事件。

問題是選擇您感興趣的所有單元格並切換可見性。

的方法之一是限制選擇的單元使用jQuery :lt和:gt加上css

$(function() { 
 
    var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png"; 
 
    var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"; 
 

 
    var sum1 = 0; 
 
    $('tr').find('.combat1').each(function() { 
 
    var combat1 = $(this).text(); 
 
    if (!isNaN(combat1) && combat1.length !== 0) { 
 
     sum1 += parseFloat(combat1); 
 
    } 
 
    }); 
 
    var sum2 = 0; 
 
    $('tr').find('.combat2').each(function() { 
 
    var combat2 = $(this).text(); 
 
    if (!isNaN(combat2) && combat2.length !== 0) { 
 
     sum2 += parseFloat(combat2); 
 
    } 
 
    }); 
 
    var sum3 = 0; 
 
    $('tr').find('.combat3').each(function() { 
 
    var combat3 = $(this).text(); 
 
    if (!isNaN(combat3) && combat3.length !== 0) { 
 
     sum3 += parseFloat(combat3); 
 
    } 
 
    }); 
 

 
    $('.total-combat1').html(sum1); 
 
    $('.total-combat2').html(sum2); 
 
    $('.total-combat3').html(sum3); 
 

 

 
    // The new header click event 
 

 
    $('.header').click(function(e) { 
 
    var isVisible = false; 
 
    var strSelector = ''; 
 
    var everyTotIndex = 4; 
 
    if (this.innerText.trim() == 'Q1') { 
 
     everyTotIndex = 4; 
 
     strSelector = 'td:not([colspan="4"]):lt(4), th:not([colspan="4"]):lt(4)'; 
 
    } else { 
 
     everyTotIndex = 3; 
 
     strSelector = 'td:not([colspan="3"]):lt(7):gt(3), th:not([colspan="3"]):lt(7):gt(3)'; 
 
    } 
 
    $(this).parents('table').find('tr:eq(2), tbody > tr').find(strSelector).css('display', function(index, value) { 
 
     if (this.style.display == 'none') { 
 
     isVisible = true; 
 
     if ((index % everyTotIndex) == 0) { 
 
      $(this).parent().find('td[colspan="' + everyTotIndex + '"], th[colspan="' + everyTotIndex + '"]').remove(); 
 
     } 
 
     return ''; 
 
     } 
 
     if ((index % everyTotIndex) == 0) { 
 
     if (this.tagName.toLowerCase() == 'th') { 
 
      $('<th colspan="' + everyTotIndex + '" class="total">Total</th>').insertBefore($(this)); 
 
     } else { 
 
      $('<td colspan="' + everyTotIndex + '" class="combat1 total">0</td>').insertBefore($(this)); 
 
      var obj = $(this).parent().find('td[colspan="' + everyTotIndex + '"]'); 
 
      obj.text(+obj.text() + parseInt(this.textContent)); 
 
     } 
 
     } else { 
 
     if (this.tagName.toLowerCase() == 'td') { 
 
      var obj = $(this).parent().find('td[colspan="' + everyTotIndex + '"]'); 
 
      obj.text(+obj.text() + parseInt(this.textContent)); 
 
     } 
 
     } 
 
     return 'none'; 
 
    }); 
 
    if (isVisible) { 
 
     $(this).find('img').attr('src', "http://www.unesco.org/ulis/imag/minus.png"); 
 
    } else { 
 
     $(this).find('img').attr('src', "http://www.unesco.org/ulis/imag/plus.png"); 
 
    } 
 
    }); 
 
});

body { 
 
    background: #80dfff; 
 
    color: #d5d4d4; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 12px; 
 
    margin: 0; 
 
    overflow-x: auto; 
 
    padding: 30px; 
 
} 
 
table { 
 
    background: white; 
 
    border-collapse: collapse; 
 
    border: 1px #393939 solid; 
 
    color: black; 
 
    margin: 1em 1em 1em 0; 
 
} 
 
thead { 
 
    border-collapse: collapse; 
 
    color: black; 
 
} 
 
th, td { 
 
    border: 1px #aaa solid; 
 
    padding: 0.2em; 
 
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 

 
<table> 
 
    <thead> 
 
    <tr><th colspan=8>2015</th></tr> 
 
    <tr><th colspan=4 class="header">Q1 
 
     <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /> 
 
    </th> 
 
     <th colspan=3 class="header">Q2 
 
      <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /> 
 
     </th> 
 

 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th>WK1</th> 
 
     <th>WK2</th> 
 
     <th>WK3</th> 
 
     <th>WK4</th> 
 

 
     <th>WK1</th> 
 
     <th>WK2</th> 
 
     <th>WK3</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="combat1">8170</td> 
 
     <td class="combat1">6504</td> 
 
     <td class="combat1">6050</td> 
 
     <td class="combat1">6050</td> 
 

 
     <td class="combat1">7050</td> 
 
     <td class="combat1">7050</td> 
 
     <td class="combat1">7050</td> 
 

 
     <td class="total-combat1"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="combat2">8500</td> 
 
     <td class="combat2">10200</td> 
 
     <td class="combat2">7650</td> 
 
     <td class="combat2">7650</td> 
 

 
     <td class="combat2">8650</td> 
 
     <td class="combat2">8650</td> 
 
     <td class="combat2">8650</td> 
 

 
     <td class="total-combat2"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="combat3">9185</td> 
 
     <td class="combat3">5515</td> 
 
     <td class="combat3">6185</td> 
 
     <td class="combat3">7185</td> 
 

 
     <td class="combat3">9185</td> 
 
     <td class="combat3">9185</td> 
 
     <td class="combat3">9185</td> 
 

 
     <td class="total-combat3"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-01-22 23:39:34 gaetanoM

嗨gaemaf - 感謝您的快速週轉。非常感激。我修改了上面的第一個問題，以澄清我期望歸檔的內容。除了最後一列，我還想總結並顯示季度總計（wk1 - wkn），一旦四分之一列（例如Q1）摺疊。另外，當隱藏事件被觸發時（爲了節省一些房地產），我希望每季度的專欄都會崩潰。再次感謝你的幫助。 – kBoni

太棒了！這就是我一直在尋找的。謝謝一堆gaemaf – kBoni

一個快速添加，當我點擊Q1它很好。但是，當我點擊Q2時，事情變得時髦！有什麼想法嗎？ – kBoni

我試圖找出你試圖做...正確的，如果我錯了：你正在嘗試切換下面的一組列，例如Q1，當你點擊標題欄時？如果是這樣，這裏的代碼。我修改了代碼，添加到主表下的嵌套表中，以組織/劃分兩組信息，這樣我就可以用jQuery輕鬆選擇哪一個我要切換。

$(document).ready(function() { 
 

 
    var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png"; 
 
    var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"; 
 

 
    var sum1 = 0; 
 
    $('tr').find('.combat1').each(function() { 
 
    var combat1 = $(this).text(); 
 
    if (!isNaN(combat1) && combat1.length !== 0) { 
 
     sum1 += parseFloat(combat1); 
 
    } 
 
    }); 
 
    var sum2 = 0; 
 
    $('tr').find('.combat2').each(function() { 
 
    var combat2 = $(this).text(); 
 
    if (!isNaN(combat2) && combat2.length !== 0) { 
 
     sum2 += parseFloat(combat2); 
 
    } 
 
    }); 
 
    var sum3 = 0; 
 
    $('tr').find('.combat3').each(function() { 
 
    var combat3 = $(this).text(); 
 
    if (!isNaN(combat3) && combat3.length !== 0) { 
 
     sum3 += parseFloat(combat3); 
 
    } 
 
    }); 
 

 

 
    $('.header-1').click(function() { 
 
    $("#table1").toggle(); 
 
    }); 
 

 
    $('.header-2').click(function() { 
 
    $("#table2").toggle(); 
 
    }); 
 

 
});

body { 
 
    color: #d5d4d4; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 12px; 
 
    margin: 0; 
 
    overflow-x: auto; 
 
    padding: 30px; 
 
} 
 
table { 
 
    background: white; 
 
    border-collapse: collapse; 
 
    border: 1px #393939 solid; 
 
    color: black; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
thead { 
 
    border-collapse: collapse; 
 
    color: black; 
 
} 
 
th, 
 
td, 
 
tr { 
 
    border: 1px #aaa solid; 
 
    padding: 0; 
 
} 
 
td.combat { 
 
    padding: 0.2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan=2>2015</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="header-1">Q1 
 
     <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /> 
 
     </th> 
 
     <th class="header-2">Q2 
 
     <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <table id="table1"> 
 
      <tr> 
 
      <th>WK1</th> 
 
      <th>WK2</th> 
 
      <th>WK3</th> 
 
      <th>WK4</th> 
 
      </tr> 
 
      <tr> 
 
      <td class="combat combat1">8170</td> 
 
      <td class="combat combat1">6504</td> 
 
      <td class="combat combat1">6050</td> 
 
      <td class="combat combat1">6050</td> 
 
      </tr> 
 

 
      <tr> 
 
      <td class="combat combat1">8170</td> 
 
      <td class="combat combat1">6504</td> 
 
      <td class="combat combat1">6050</td> 
 
      <td class="combat combat1">6050</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td> 
 
     <table id="table2"> 
 
      <tr> 
 
      <th>WK1</th> 
 
      <th>WK2</th> 
 
      <th>WK3</th> 
 
      </tr> 
 
      <tr> 
 
      <td class="combat combat2">7050</td> 
 
      <td class="combat combat2">7050</td> 
 
      <td class="combat combat2">7050</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="combat combat2">7050</td> 
 
      <td class="combat combat2">7050</td> 
 
      <td class="combat combat2">7050</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td> 
 
     <table> 
 
      <tr> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-01-23 00:04:51

感謝快速的Turnaround Aymen Ben Tanfous。 – kBoni

我修改了上面的第一個問題，以澄清我期望歸檔的內容。除了最後一列，我還想總結並顯示季度總計（wk1 - wkn），一旦四分之一列（例如Q1）摺疊。再次感謝。 – kBoni

切換嵌套表列-html，jQuery

回答

相關問題