当下一行的单元格填充位置时，删除表单元格

Remove table cell while cells from next rows fill the place

本文关键字：单元格 位置 填充 表单 删除 一行      更新时间：2023-09-26

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

我想要的是单元格的浮动和填充的地方，所以表格从最后一行的结束缩小(而不是每一行分开)。如果表是这样的

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创建一个新的表。这是可行的方法吗?还是有更有效的方法?

尝试此代码在删除td后重新排列下一个所有tr > 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>

如果不强制使用表格，可以使用固定宽度的浮动div。

.table-item { float: left: width: 25%; }
相关文章：