Question

我有一个表，每行有一个固定数量的单元格，通过点击它被移除的每个单元格。

我想要的是浮动并填充该位置的单元格，以便表格从最后一行的末尾（而不是每行分别）缩小。如果表格如下：

A ... B ... C ... D  
E ... F ... G ... H  
I ... J ... K ... L

如果删除C，结果将如下：

A ... B ... D ... E  
F ... G ... H ... I  
J ... K ... L

jsfiddle

$('td').on('click', function() {
    $(this).remove();
   //re-arrange table
});

我能想到的唯一方法是将所有tds放在一个数组中，清空表并根据可用的tds创建一个新表。这会是一种方式，还是一种更有效的方法来实现这一目标。

提前致谢。

Answer 1

尝试使用此代码在移除tr > td后重新排列所有td，这将仅占用所有下一个tr td并移至已删除的td tr部分。。它将仅运行下一次所有可用的tr次，因此在删除td之后重新映射整个表会更好

var tbl = $('#num_tbl');
var tr = $('<tr/>');
for (var i = 1; i < 102; i++) {
  if ((i - 1) % 10 == 0) {
    tbl.append(tr);
    tr = $('<tr/>');
    if ((i - 1) / 10 % 2 == 1)
      tr.addClass('odd');
  }
  var td = $('<td/>');
  td.text(i);
  td.attr("data-num", i);
  tr.append(td);
}

$('td').on('click', function() {
  var $_thisTR = $(this).closest('tr');
  $.when($(this).remove()).then(function() {
    $_thisTR.next('tr').find('td:first').detach().appendTo($_thisTR);
    $_thisTR.next('tr').nextAll('tr').each(function(i, o) {
      $('>td:first', o).detach().appendTo($(o).prev());
      if (!$('td', o).length) {
        $(o).remove();
      }
    })
  })
});

td {
  padding: 8px 16px;
}
tr.odd {
  background-color: #eeeeee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="num_tbl"></table>

Answer 2

如果您不被迫使用表格，只需使用固定宽度的浮动div。

.table-item { float: left: width: 25%; }

删除表格单元格，而下一行的单元格填充

2 个答案: