jQuery将TD注入适当的列(俄罗斯方块风格）
jQuery Inject TD into appropriate Column (Tetris Style)
我有两个表。一个是临时表，一个是主表，最终将使用临时表的内容进行排序。
这个问题的主要原因是主表中有太多空单元格。
我试图从临时表中提取单元格，并将它们放在主表中适当的列中，升序排列，这样最终结果将是4列，在必要时只有空单元格，以允许正常的表流，而不会破坏表流。
每个元素都有一个关联的类，但我似乎可以创建一个选择器，它可以安全地迭代临时表和主表，而不会破坏主表。我能给出的唯一提示是，我可能需要构建一个分别使用replaceWith()和breakjQuery和JavaScript方法的for循环。
完成后，任何只有空td的表行都可以删除。
最后，这个问题源于我几乎已经解决的另一个StackOverflow问题，这是我需要克服的最后一个障碍
这个问题正在进行的工作可以在这里找到。
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);
});
});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;
}<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>我可以想出各种方法来做到这一点。
你可以先建立表格。获取每个类别的项目数。最高的数字是需要创建的TR的数量。有数据的数组在这里会很方便。
对于每一列（类别），保留最后一个已填充的垂直位置或第一个空槽的变量。这样你就知道该填哪一个了。
你可以用css选择器（第n个类型）或索引来定位你需要的TR和TD。在javascript中，您还可以使用cellIndex和rowIndex。
如果你想动态创建TR，那么每次你想填写TD时，你首先要检查是否已经有TR可以放入TD，否则就创建它
把临时工作台扔掉。这只会使事情变得复杂。
此外，如果表中的所有单元格都有colspan="2"，则不需要它们。
我用不同的方式问了这个问题，并在这篇文章中得到了正确的答案。
$(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);
}
});
相关文章：
- 方块几乎不动(Javascript）
- jQuery将TD注入适当的列(俄罗斯方块风格）
- 俄罗斯木偶与Firefox和Webkit的显示问题:与IE配合良好
- JS:只需javascript即可更改画布上的颜色方块
- 在类似俄罗斯方块的游戏中碰撞后没有显示的物体
- Jquery滑块-无法填充滑块中的所有方块
- 绘制方块 1 英里 x 1 英里
- 如何确定游戏方块中的可移动区域
- 如何在爬行室中找到所有沼泽方块
- 在扫雷中清理空白方块周围的区域时遇到问题
- Jasmine-在所有方块之前连续奔跑
- 动态编辑表单，用于某种带有AngularJS的俄罗斯娃娃容器
- 滑动方块益智游戏，视频(youtube）背景
- 让俄罗斯方块落在javascript中
- 在JS俄罗斯方块中移动当前棋子
- 暂停/取消暂停Javascript俄罗斯方块游戏
- Box2D体b2FixtureDef.shape.SetAsArray不能处理俄罗斯方块形状
- 俄罗斯方块2d阵列逻辑
- 将数组用于俄罗斯方块和网格.为什么这件作品不会完全出现
- 在JavaScript俄罗斯方块中绘制新的方块
