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

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%; }