jQuery将TD注入适当的列（俄罗斯方块风格）

时间：2016-05-08 21:14:53

标签： javascript jquery html html-table

我有两张桌子。一个是临时表，一个是主表，最终将使用临时表的内容进行排序。

这个问题的主要原因是我在主表中有太多空单元格。

我试图从临时表中提取单元格并将它们放在主表中的相应列中，然后升序，以便最终结果为4列，必要时只有空单元格，以允许正常的表流，没有打破表流。

每个元素都有一个关联的类，但我似乎可以创建一个选择器，它可以安全地迭代临时表和主表而不会破坏主表。我可以给出的唯一提示是我可能需要构建一个分别使用replaceWith()和break jQuery和JavaScript方法的for循环。

在完成之后，任何只有空tds的表行都可以删除。

最后，这个问题源于我几乎已经解决的另一个StackOverflow问题，在这里，这是我需要解决的最后一个障碍。

可以找到该问题的进展here。

＆＃13;
＆＃13; 
var $tempScanner = $('table.temp tr td');

$tempScanner.each(function(i, v) {
  var $tempClass = $(v).attr("class");
  var $tempTD = $(v);

  $('#tblGrid tr').each(function(x, o) {
    var tdMatch = $(this).eq(x).find($('td.' + $tempClass));
    if (tdMatch.length > 0) {
      $(this).eq(x).find($('td.' + $tempClass)).replaceWith($tempTD);
    }
    console.log(tdMatch);
  });
});
＆＃13; 
td,
th {
  border: 1px solid #111;
  padding: 6px;
}
th {
  font-weight: 700;
}
span.pull-right {
  float: right;
  text-align: right;
}
.a,
.A {
  background-color: #ACE;
}
.b,
.B {
  background-color: #FAF;
}
.c,
.C {
  background-color: #BAB;
}
.d,
.D {
  background-color: #ECA;
}
.targetFound {
  border: solid 2px red;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table style="display:;" class="temp">
  <tbody>
    <tr>
      <td colspan="2" data-id="1" data-catg="a" class="a">Ooo<span class="pull-right">kr.8</span>
      </td>
      <td colspan="2" data-id="7" data-catg="b" class="b">Pppp<span class="pull-right">kr.10</span>
      </td>
      <td colspan="2" data-id="12" data-catg="c" class="c">Kkkk<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="2" data-catg="a" class="a">Ffff<span class="pull-right">kr.8</span>
      </td>
      <td colspan="2" data-id="4" data-catg="b" class="b">Ssss<span class="pull-right">kr.10</span>
      </td>
      <td colspan="2" data-id="15" data-catg="c" class="c">Vvvv<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="5" data-catg="b" class="b">Iiii<span class="pull-right">kr.10</span>
      </td>
      <td colspan="2" data-id="21" data-catg="c" class="c">Llll<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="22" data-catg="a" class="a">Mmmm<span class="pull-right">kr.9</span>
      </td>
      <td colspan="2" data-id="7" data-catg="b" class="b">Bbbb<span class="pull-right">kr.12</span>
      </td>
      <td colspan="2" data-id="8" data-catg="b" class="b">Eeee<span class="pull-right">kr.8</span>
      </td>
      <td colspan="2" data-id="9" data-catg="c" class="c">Gggg<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="10" data-catg="c" class="c">Cccc<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="11" data-catg="c" class="c">Aaaa<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="6" data-catg="b" class="b">Nnnn<span class="pull-right">kr.10</span>
      </td>
      <td colspan="2" data-id="3" data-catg="a" class="a">Zzzz<span class="pull-right">kr.8</span>
      </td>
      <td colspan="2" data-id="13" data-catg="c" class="c">Mmmm<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="14" data-catg="c" class="c">Rrrr<span class="pull-right">kr.6</span>
      </td>
      <td colspan="2" data-id="17" data-catg="d" class="d">Hhhh<span class="pull-right">kr.5</span>
      </td>
      <td colspan="2" data-id="18" data-catg="d" class="d">Uuuu<span class="pull-right">kr.5</span>
      </td>
      <td colspan="2" data-id="19" data-catg="d" class="d">Qqqq<span class="pull-right">kr.5</span>
      </td>
      <td colspan="2" data-id="20" data-catg="d" class="d">Xxxx<span class="pull-right">kr.5</span>
      </td>
    </tr>
  </tbody>
</table>
<table id="tblGrid">
  <tbody>
    <tr>
      <th class="A" colspan="2">A</th>
      <th class="B" colspan="2">B</th>
      <th class="C" colspan="2">C</th>
      <th class="D" colspan="2">D</th>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
    <tr class="emptyRow">
      <td colspan="2" class="a"></td>
      <td colspan="2" class="b"></td>
      <td colspan="2" class="c"></td>
      <td colspan="2" class="d"></td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我可以想到各种方法来做到这一点。

您可以先构建表格。获取每个类别的项目数。最高的数字是需要创建的TR的数量。带有数据的数组在这里很方便。

对于每个列（类别），保留已填充的最后一个垂直位置的变量，或第一个空插槽。那样你就知道要填写哪一个。

您可以使用例如所需的TR和TD。一个css选择器（nth-of-type）或索引。在javascript中，您还可以使用cellIndex和rowIndex。

如果你想动态创建TR，那么每次你想要填写一个TD时，首先要检查是否已经有TR将TD放入，否则创建它。

摆脱临时表。它只会让事情复杂化。

此外，如果表格中的所有单元格都有colspan="2"，那么您不需要它们。

答案 1 :(得分：0)

我以不同的方式提出问题，并在this帖子中收到了正确答案。

$(function() {
  var $tempScanner = $('table.temp tr td');
  var tempArry = [];

  $tempScanner.each(function(i, el) {
    var d = {};
    d.text = $(el).text();
    d.html = $(el).html();
    d.class = $(el).attr('class');
    tempArry.push(d);
  });

  function compareObj(o1, o2) {
    return o1.text > o2.text;
  }

  tempArry = tempArry.sort(compareObj);
  console.log(tempArry);

  for (var i = 0; i < tempArry.length; i++) {
    var tdClass = tempArry[i].class;
    $('#tblGrid td.' + tdClass + ':empty:first').html(tempArry[i].html);
  }

});
相关问题
最新问题