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表格行可扩展

回答

相关问题