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

Question

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

我想要的是单元格 float 并填充位置，以便表格从最后一行的末尾开始收缩(而不是每一行分开)。所以如果表格是这样的:

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

尝试此代码在删除 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>