0

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 フィドル リンク

4

1 に答える 1

5

行を逆の順序で (下から上に) ループします。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 操作を大量に行いますが、機能します。そのため、テーブルが大きい場合は、別の方法に進みたいと思うでしょう。おそらく、列配列の配列を構築したらテーブルを調べて、各列に空白以外のセルのみを追加してから、テーブルを完全に置き換えますその新しいデータに基づいています。

于 2013-03-15T09:55:20.760 に答える