Javascript Ajax从行中删除单元格，重新计算行将单元格移动到下一行

使用具有动态单元格宽度的twitter引导行/表结构，我有一个ajax脚本，可以从数据库中删除记录并删除HTML

但是在删除之后，我如何重新计算行呢？这是我无法理解逻辑过程的部分

例如：如果我从中间一行删除一个单元格，它将计算删除后是否有足够的可用空间，并将该单元格移到下一行。然后循环到下一行/etc

理想情况下，如果它使用动态宽度，那么它将非常酷，因此所有跨度加起来都是12。只有在肯定有空间的情况下，它才会将项目移动到下一行

如果我删除了一个大跨度/宽跨度，并且下一行有两个小跨度的空间进行替换。等等，我想你明白了

<div class="row">
   <div class="span4">...<a href="">Delete</a></div>
   <div class="span4">...<a href="">Delete</a></div>
   <div class="span4">...<a href="">Delete</a></div>
</div>
<div class="row">
   <div class="span6">...<a href="">Delete</a></div>
   <div class="span2">...<a href="">Delete</a></div>
   <div class="span4">...<a href="">Delete</a></div>
</div>
<div class="row">
   <div class="span2">...<a href="">Delete</a></div>
   <div class="span8">...<a href="">Delete</a></div>
   <div class="span2">...<a href="">Delete</a></div>
</div>

    $('a').click(function(e){    
    e.preventDefault();
    var $self = $(this);

    $.ajax({
        type: 'POST',
        url: ajaxAction,
        data: obj,
        dataType: 'json',
        success: function(data, status, jqXHR){
            if(data && data.ok){
                $self.parent().slideUp("slow", function(){
                    if(delete_container.substring(0,5) == ".span"){

                        // get parent row
                        var row = $(this).parent();
                        if(row.hasClass("row") || row.hasClass("row-fluid")){
                            var count = 0;
                            row.children("[class*='span']").each(function(){

                                count = $(this).attr('class').match(/\d+/);                                     

                            });

                            if(count < 12){
                                // check next line and move item up if it fits
                                // then loop over everything again on the next row
                            }
                        }                               
                    }
                    $(this).remove(); 
                })
            }   
        }
    });
});

---

最简单的方法：更改表的结构，删除，然后在单元格中添加float:left。浏览器会处理所有事情：

但如果不可接受，则让我们使用名为RebeatTableFromRow的函数：

---

它只是元代码，没有经过测试，展示了一个如何构建它的想法。现在，您应该从单元格被删除的行到表的末尾调用RELEGANSTABLE fromRow，它应该可以工作。

我不是在找人在这里写所有内容，只是告诉我如何工作。我不知道我是否正确地理解了你，让我们检查一下：例如，表3列有3行。您现在正在删除第一行和第二列位置[1,2]中的单元格。现在你想检查第一行是否有足够的空间给单元格[2,1]第二行第一列，把它放在那里？完全是的，然后它会循环到第三行，在那里有足够的空间将2个单元格移动到下一行

rearrangeTable( fromRow ) { //from row is a number of row, where you have deleted cell.
var $actualRow = $('div.row:eq('+fromRow+')');
var $nextRow = $actualRow.next(div.row);

//getting free space in actual row
var freeSpace = $actualRow.width(); //IMPORTANT: width() not outerWidth()
$actualRow.find('cell_selector :)').each( function(i) {
    freeSpace -= $(this).outerWidth();
})

var $nextCell;
while( $nextCell = getFirstCell( $nextRow ) ) { //ill not show this function its trivial, just returns first cell or false if there are no more cells
    var cellWidth = $nextCell.outerWidth();
    if( freeSpace >= cellWidth ) {
        letsMoveThisCell( $nextCell, $actualRow);
        freeSpace -= cellWidth;
    } else {
        break; //no more space, we can end there
    }
}