CODEWITHSUNDEEP
javascriptjqueryhtml
Samurai
Samurai

Reputation: 3729

Remove table cell while cells from next rows fill the place

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.

Upvotes: 1

Views: 548

Answers (2)

Girish
Girish

Reputation: 12117

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>

Upvotes: 2

Johannes Reuter
Johannes Reuter

Reputation: 3547

If you are not forced to use tables, just use floating divs with a fixed width.

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

Upvotes: 1

Related Questions