如果td为空,如何将td中的表数据向上移动td

Question

我有两个非常简单html table ,其中分发了一些数据,请参阅下面的代码这是我到目前为止所做的.我被困在这里请帮助我.

var x = 0,y=0;
$("table tr td").each(function(){
    if($(this).text() !== ""){
        alert($(this).text());
        y++;
    }
    x++;
});
alert(x);//indicates how many td's 
alert(y);//indicates how many td have values

现在,我只想将每个td中的数据移动到td以上,如果没有数据的话.请点击下面的Js FIDDLE链接

JS FIDDLE链接

Answer 1

以相反的顺序循环遍历行(从下往上).对于每个td有数据的人,查看td上一行中相应索引处的空是否为空.如果是这样,请将内容移动到该行.您可以使用index或:eq选择器访问上一行td.你需要多次传递来处理列中有多个空格的情况,但代码要简单得多.

更复杂的方法是在找到空白时前进并随机播放整列.我对这看起来很感兴趣,所以:

var rows = $("#xyz tr");
var row, n;

for (row = 0; row < rows.length - 1; ++row) {
  $(rows[row]).children().each(function(col) {
    var thisCell, cellBelow, text, foundText;

    foundText = true;
    thisCell = $(this);
    while (!thisCell.text() && foundText) {
      // This cell has no text, shuffle the column up
      foundText = false;
      for (n = row; n < rows.length - 1; ++n) {
        cellBelow = $($(rows[n + 1]).children()[col]);
        text = cellBelow.text();
        if (text) {
          foundText = true;
        }
        $($(rows[n]).children()[col]).text(text);
        cellBelow.text('');
      }
    }
  });
}

实例 | 来源 (对不起,不能忍受 jsFiddle - 根据我的经验,慢和毛病)

现在,这是相当低效的,并且做了大量的DOM操作,但它确实有效.因此,如果表格很大,我会想要采用另一种方式,也许在构建一个列数组阵列后遍历表格,只向每列添加非空白单元格,然后完全替换表格基于这些新数据.