jQuery：覆盖和恢复属性值

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 代码（通过“切换”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

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

给你：

函数 runTableCollapse() { $(this).parent().nextUntil("tr.master").toggleClass("toggled"); if ($(this).parent().next("tr.child").is(':hidden')) { $(this).attr('rowspan', 1); } 别的 { $(this).attr('rowspan', ($(this).parent().nextUntil("tr.master").size() + 1)); } } $(文档).ready(函数(){ $(".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

您可以使用 jquery data 对象来存储您的原始 rowspan 值。

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

稍后您可以像这样读取存储值：

$(this).data("originalRowSpan")

Answer 4

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

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"));
  });
});

祝你好运！

编辑：我刚刚注意到表格的第二部分只有两行。所以不是数字四，而是计算行数 ($(this).somethingsomething.size()) 并加 1。

Answer 5

我添加了我的解决方案，使用 jQuery.data 存储值。
编辑。与此同时，我正在准备这个回复，我现在看到 Richard 已经提出了这个建议。
我做了一个你的演示 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");

});