html表格行可擴展

我有一個html表格，其行已經可擴展，但我想要的只是擴展一行。html表格行可擴展

當一行被展開並且用戶展開另一行時，我想要展開的行被關閉。總之，只有一行可以擴展。我試圖尋找一個解決方案，但我找不到一個解決方案。也許我不知道要使用的關鍵字。

這是我當前的代碼：

$(document).ready(function(){ 
      $("#report tr:odd").addClass("odd"); 
      $("#report tr:not(.odd)").hide(); 
      $("#report tr:first-child").show(); 

      $("#report tr.odd").click(function(){ 

       $(this).next("tr").toggle(); 
       $(this).find('i').toggleClass('glyphicon-plus-sign').toggleClass('glyphicon-minus-sign'); 
      }); 

     });

這是示例代碼 https://jsfiddle.net/knowmeifyou/bc6c8ab1/

我想只有一排可擴展。謝謝

來源

2016-01-30 knowmeifyou

你可以在jsfiddle中添加你的代碼嗎？ –

這是示例代碼https://jsfiddle.net/knowmeifyou/bc6c8ab1/ 我想要的只有一行可以擴展。謝謝先生 – knowmeifyou

在這種情況下，至少在React & Co.出現之前，人們所做的一個普通技巧就是通過像類一樣的屬性將狀態保存到DOM中。例如，對於您的情況，您可以通過向其添加一個類將行標記爲expanded，並在擴展新行之前簡單關閉當前所有行的expanded行。

這種替換單擊處理代碼：

$("#report tr.odd").click(function(){ 
    $('.expanded').each(function() { 
    var $row = $(this); 
    toggle($row); 
    $row.removeClass('expanded'); 
    }); 

    var $currentRow = $(this); 
    toggle($currentRow); 
    $currentRow.addClass('expanded'); 
}); 

function toggle($row) { 
    $row.next("tr").toggle(); 
    $row.find('i').toggleClass('glyphicon-plus-sign').toggleClass('glyphicon-minus-sign'); 
}

來源

2016-01-31 00:50:34

更改整個代碼以擴展錶行到上面的代碼先生？我嘗試過這個。但現在所有的html表格行在沒有用戶交互的頁面加載時崩潰 – knowmeifyou

@knowmeifyou https://jsfiddle.net/limdauto/frj805j8/1/小提琴。並請，不，先生。 –

對不起，打電話給你'先生'，我們用這個名字來表示尊重。 – knowmeifyou

我有固定您的問題，只需更換以下jQuery代碼： -

$(document).ready(function(){ 
    $("#report tr:odd").addClass("odd"); 
    $("#report tr:not(.odd)").hide(); 
    $("#report tr:first-child").show(); 

    $("#report tr.odd").click(function(){ 
     $("#report tr.odd").next("tr").hide(); 
     $(this).next("tr").toggle(); 
     $(this).find('i').toggleClass('glyphicon-plus-sign').toggleClass('glyphicon-minus-sign'); 
    }); 
});

我已經在代碼中添加$("#report tr.odd").next("tr").hide();。

它可以幫助你。

來源

2016-02-01 04:36:28

html表格行可擴展

回答

相關問題