简体   繁体   English

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

[英]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: 如果删除C ,结果将如下:

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

jsfiddle 的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. 我能想到的唯一方法是将所有tds放在一个数组中,清空表并根据可用的tds创建一个新表。 Would that be the way to go or there's a more efficient way of achieving this. 这将是要走的路,还是有更有效的方法来实现这一目标。

Thanks in advance. 提前致谢。

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 试试这个代码旁边重新排列所有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> 

如果您不被迫使用表,只需使用具有固定宽度的浮动div。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM