我有一个 table containing cells with rowspan attributes ，我想:

1. 每当隐藏 tr 时，表格都会正确地自行重新排列
2. 每当 tr 再次显示时，它将恢复到原始状态

所以如果你有一个 table like this单击 X 不应破坏布局。 并单击 come back 按钮，应恢复原始布局。

(尝试从下往上删除所有行，而不是从右到左恢复它们，这是一个理想的流程)

我有一些半解决方案，但似乎都太复杂了，我相信有一个很好的方法来处理这个问题。

最佳答案

好吧，我真的花了很长时间在这个问题上，所以这里...

对于那些只想查看工作解决方案的人，click here

更新:我更改了可视列计算方法以遍历表并创建一个二维数组，以查看使用 jQuery offset()<> 方法，click here .代码更短，但时间成本更高。

问题的存在是因为当我们隐藏一行时，虽然我们希望所有的单元格都被隐藏，但我们想要的是伪单元格——也就是说，单元格似乎在后面的行中由于单元格 rowspan 属性 — 持久化。为了解决这个问题，每当我们遇到一个带有 rowspan 的隐藏单元格时，我们都会尝试将它向下移动到下一个可见行(在我们移动时递减它的 rowspan 值) .使用我们的原始单元格或其克隆，然后我们对包含伪单元格的每一行再次向下迭代表格，如果该行被隐藏，我们再次递减 rowspan。 (要了解原因，请查看工作示例，注意当隐藏蓝色行时，红色单元格 9 的行跨度必须从 2 减少到 1，否则它会将绿色单元格 9 推向右)。

考虑到这一点，我们必须在显示/隐藏行时应用以下函数:

function calculate_rowspans() {
  // Remove all temporary cells
  $(".tmp").remove();

  // We don't care about the last row
  // If it's hidden, it's cells can't go anywhere else
  $("tr").not(":last").each(function() {
    var $tr = $(this);

    // Iterate over all non-tmp cells with a rowspan    
    $("td[rowspan]:not(.tmp)", $tr).each(function() {
      $td = $(this);
      var $rows_down = $tr;
      var new_rowspan = 1;

      // If the cell is visible then we don't need to create a copy
      if($td.is(":visible")) {
        // Traverse down the table given the rowspan
        for(var i = 0; i < $td.data("rowspan") - 1; i ++) {

          $rows_down = $rows_down.next();
          // If our cell's row is visible then it can have a rowspan
          if($rows_down.is(":visible")) {
            new_rowspan ++;
          }
        }
        // Set our rowspan value
        $td.attr("rowspan", new_rowspan);   
      }
      else {
        // We'll normally create a copy, unless all of the rows
        // that the cell would cover are hidden
        var $copy = false;
        // Iterate down over all rows the cell would normally cover
        for(var i = 0; i < $td.data("rowspan") - 1; i ++) {
          $rows_down = $rows_down.next();
          // We only consider visible rows
          if($rows_down.is(":visible")) {
            // If first visible row, create a copy

            if(!$copy) {
              $copy = $td.clone(true).addClass("tmp");
              // You could do this 1000 better ways, using classes e.g
              $copy.css({
                "background-color": $td.parent().css("background-color")
              });
              // Insert the copy where the original would normally be
              // by positioning it relative to it's columns data value 
              var $before = $("td", $rows_down).filter(function() {
                return $(this).data("column") > $copy.data("column");
              });
              if($before.length) $before.eq(0).before($copy);
              else $(".delete-cell", $rows_down).before($copy);
            }
            // For all other visible rows, increment the rowspan
            else new_rowspan ++;
          }
        }
        // If we made a copy then set the rowspan value
        if(copy) copy.attr("rowspan", new_rowspan);
      }
    });
  });
}

问题的下一个真正困难部分是计算将单元格副本放置在行中的哪个索引处。请注意，在示例中，蓝色单元格 2 在其 0 行中有一个 actual 索引，即它是该行中的第一个实际单元格，但是我们可以看到它在视觉上位于第 2 列(0 索引).

我采用了只计算一次的方法，即在文档加载后立即计算。然后我将这个值存储为单元格的数据属性，这样我就可以将它的副本放在正确的位置(我在这个上有过很多灵光一现的时刻，并做了很多页的笔记!)。为了进行此计算，我最终构建了一个二维数组 matrix，它跟踪所有使用过的可视列。同时，我存储单元格的原始 rowspan 值，因为这会随着隐藏/显示行而改变:

function get_cell_data() {
    var matrix = [];  
    $("tr").each(function(i) {
        var $cells_in_row = $("td", this);
        // If doesn't exist, create array for row
        if(!matrix[i]) matrix[i] = [];
        $cells_in_row.each(function(j) {
            // CALCULATE VISUAL COLUMN
            // Store progress in matrix
            var column = next_column(matrix[i]);
            // Store it in data to use later
            $(this).data("column", column);
            // Consume this space
            matrix[i][column] = "x";
            // If the cell has a rowspan, consume space across
            // Other rows by iterating down
            if($(this).attr("rowspan")) {
                // Store rowspan in data, so it's not lost
                var rowspan = parseInt($(this).attr("rowspan"));
                $(this).data("rowspan", rowspan);
                for(var x = 1; x < rowspan; x++) {
                    // If this row doesn't yet exist, create it
                    if(!matrix[i+x]) matrix[i+x] = [];
                    matrix[i+x][column] = "x";
                }
            }
        });
    });

    // Calculate the next empty column in our array
    // Note that our array will be sparse at times, and
    // so we need to fill the first empty index or push to end
    function next_column(ar) {
        for(var next = 0; next < ar.length; next ++) {
            if(!ar[next]) return next;
        }
        return next;
    }
}

然后简单地在页面加载时应用它:

$(document).ready(function() {
    get_cell_data();
});

(注意:虽然这里的代码比我的 jQuery .offset() 替代方案更长，但计算起来可能更快。如果我错了请纠正我)。

关于javascript - 隐藏表行时使用 rowspan 处理单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17604341/