Question

我正在尝试在数据表中拥有可扩展的行。每次我有一个“主行”，然后是一个或多个“子行”，通过单击主行的第一个单元格来切换。

这是我的HTML：

<tbody>
  <tr class="master">
    <th rowspan="3" scope="row" class="toggle">Toggle</th>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="child">
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="child">
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="master">
    <th rowspan="2" scope="row" class="toggle">Toggle</th>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="child">
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</tbody>

我的jQuery代码用于隐藏子行（通过“toggled”css类）：

$(document).ready(function(){
  $(".toggle").click(function() {
    $(this).parent().nextUntil("tr.master").toggleClass("toggled");
  });
});

我的CSS：

tr.child {display:none;}
tr.child.toggled {display:table-row;}
th.toggle {cursor:pointer;}

但是，因为我希望第一个单元格也跨越“子行”，所以我必须为其添加“rowspan”属性。但是当隐藏子行时，这会弄乱表格。所以我想要做的是在隐藏子行时将“rowspan”属性值设置为“1”（默认），并在子行可见时恢复为原始值。

点击之前将属性值设置为“1”似乎很简单：

$(".toggle").attr("rowspan", "1");

但恢复“点击”值是我无法弄清楚的。我对jQuery比较新，不熟悉检查状态。任何帮助将不胜感激！

Answer 1

动态计算孩子的解决方案。

你走了：

function runTableCollapse()
{
      $(this).parent().nextUntil("tr.master").toggleClass("toggled");
      if ($(this).parent().next("tr.child").is(':hidden'))
      {
          $(this).attr('rowspan', 1);
      }
      else
      {
          $(this).attr('rowspan', ($(this).parent().nextUntil("tr.master").size() + 1));
      }
}

$(document).ready(function(){
    $(".toggle").click(runTableCollapse);

    $('.toggle').each(runTableCollapse);
});

行动中：http://jsfiddle.net/yXCVb/

Answer 2

<script>
var row = [];
$(".toggle").each(function( index ) {
    row [index] = parseInt($( this ).attr("rowspan")) + 1;
});
    $(".toggle").attr("rowspan", "1");
    $(".toggle").click(function() {
    var ele = this;
    $(".toggle").each(function( index, element ) {
    if ( element == ele){
    $(ele).parent().nextUntil("tr.master").fadeToggle(1);
    $(ele).attr("rowspan", row [index] - $(ele).attr("rowspan"));
    }
   });
});
</script>

Answer 3

这不是很优雅，但它仍然有效：rowspan属性必须从3切换到1等等，对吧？所以只需通过从数字4中减去当前行数值来计算它：

4 - 1 = 3

4 - 3 = 1

在这里测试：http://jsfiddle.net/xpABa/

$(document).ready(function(){
  $(".toggle").click(function() {
    $(this).parent().nextUntil("tr.master").toggleClass("toggled");
    $(this).attr("rowspan", 4 - $(this).attr("rowspan"));
  });
});

祝你好运！

编辑：我刚注意到表格的第二部分只有两行。因此，而不是数字4，计算行数（$（this）.somethingsomething.size（））并添加1.

Answer 4

您可以使用jquery data对象将原始的行数值存储在。

中

$(".toggle").each(function() {
  var th = $(this);
  th.data("originalRowSpan", th.attr("rowspan"));
});

稍后您可以像这样读取商店价值：

$(this).data("originalRowSpan")

Answer 5

我添加了我的解决方案，用jQuery.data存储值编辑。与此同时，我正在准备这个回复，我现在看到理查德已经提出了这个问题我做了一个你的演示MatejB的分支，很好的工具：http://jsfiddle.net/g9G3U/1/

  $(document).ready(function(){

  // for performance, save the jQuery object in a variable
  myToggles = $(".toggle");

  // Store the attribute rowspan in each element with the help of jQuery.data
  myToggles.each(function(){
    jQuery.data(this, "original_rowspan", $(this).attr('rowspan'));
  });


  myToggles.click(function() {
    var tog = $(this).parent().nextUntil("tr.master");

    if (tog.hasClass('toggled')) {
      tog.removeClass('toggled');
      $(this).attr("rowspan","1");
    } else {
      // retrieve the original rowspan stored
      $(this).attr("rowspan", jQuery.data(this, "original_rowspan"));
      tog.addClass('toggled');
    }
  });

  myToggles.attr("rowspan", "1");

});

jQuery：覆盖和恢复属性值

5 个答案: