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 代码用于隐藏子行(通过“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/