Remove table cell while cells from next rows fill the place

Question

I have a table which each row has a fixed number of cells, by clicking on each cell it's removed.

What I want is the cells to kind of float and fill the place so the table shrinks from the end of the last row (instead of each row separately). So if the table is like:

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

If C is removed the result will be like:

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

jsfiddle

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

The only way I can think of is to put all tds in an array, empty the table and create a new one based on available tds. Would that be the way to go or there's a more efficient way of achieving this.

Thanks in advance.

Answer 1

try this code to rearrange next all tr > td after remove td , this is will take only all next tr first td and move into deleted td tr section... it will run only next all available tr times, so it would better from remap whole table after remove 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%; }