jQuery将TD插入适当的列（俄罗斯方块样式） [英] jQuery Inject TD into appropriate Column (Tetris Style)

查看：93
本文介绍了jQuery将TD插入适当的列（俄罗斯方块样式）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



这个问题的主要原因是我也有

我试图从临时表中提取单元格，并将它们放在主表的相应列中，按升序排列，以便结束结果将是4列，在必要时只有空单元格，以允许正常的表流，而不会中断表流。



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



可以删除任何只有空tds的表行，在此之后才能删除。



最后，这个问题源于另一个

这个问题的工作正在进行中此处。



  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 :;类= TEMP > < TBODY> < TR> < td colspan =2data-id =1data-catg =aclass =a> Ooo< span class =pull-right> kr.8< / span> < / TD> < td colspan =2data-id =7data-catg =bclass =b> Pppp< span class =pull-right> kr.10< / span> < / TD> < td colspan =2data-id =12data-catg =cclass =c> Kkkk< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =2data-catg =aclass =a> Ffff< span class =pull-right> kr.8< / span> < / TD> < td colspan =2data-id =4data-catg =bclass =b> Ssss< span class =pull-right> kr.10< / span> < / TD> < td colspan =2data-id =15data-catg =cclass =c> Vvvv< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =5data-catg =bclass =b> Iiii< span class =pull-right> kr.10< / span> < / TD> < td colspan =2data-id =21data-catg =cclass =c> Llll< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =22data-catg =aclass =a> Mmmm< span class =pull-right> kr.9< / span> < / TD> < td colspan =2data-id =7data-catg =bclass =b> Bbbb< span class =pull-right> kr.12< / span> < / TD> < td colspan =2data-id =8data-catg =bclass =b> Eeee< span class =pull-right> kr.8< / span> < / TD> < td colspan =2data-id =9data-catg =cclass =c> Gggg< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =10data-catg =cclass =c> Cccc< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =11data-catg =cclass =c> Aaaa< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =6data-catg =bclass =b> Nnnn< span class =pull-right> kr.10< / span> < / TD> < td colspan =2data-id =3data-catg =aclass =a> Zzzz< span class =pull-right> kr.8< / span> < / TD> < td colspan =2data-id =13data-catg =cclass =c> Mmmm< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =14data-catg =cclass =c> Rrrr< span class =pull-right> kr.6< / span> < / TD> < td colspan =2data-id =17data-catg =dclass =d> Hhhh< span class =pull-right> kr.5< / span> < / TD> < td colspan =2data-id =18data-catg =dclass =d> Uuuu< span class =pull-right> kr.5< / span> < / TD> < td colspan =2data-id =19data-catg =dclass =d> Qqqq< span class =pull-right> kr.5< / span> < / TD> < td colspan =2data-id =20data-catg =dclass =d> Xxxx< span class =pull-right> kr.5< / span> < / TD> < / TR> < / tbody>< / table>< table id =tblGrid> < TBODY> < TR> < th class =Acolspan =2> A< / th> < th class =Bcolspan =2> B< th> < th class =Ccolspan =2> C< / th> < th class =Dcolspan =2> D< / th> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < tr class =emptyRow> < td colspan =2class =a>< / td> < td colspan =2class =b>< / td> < td colspan =2class =c>< / td> < td colspan =2class =d>< / td> < / TR> < / tbody>< / table>


解决方案

我以不同的方式提出了问题，并在

  $（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）; 
}）; 
 
函数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]的.h tml）; 
} 
 
}）;


I have two tables. One is a temporary table and one is a master table that will ultimately be sorted with the contents of the temporary table.

The main reason for this question is that I have too many empty cells in the master table.

I seek to extract the cells from the temp table and put them in the appropriate column in the master table, ascending so that the end result will be 4 columns that only have empty cells where necessary, to allow for normal table flow, without breaking the table flow.

Every element has an associated class, but I just can seem to create a selector that will safely iterate over the temporary table and the master table without breaking the master table. The only hint I can give is that I may need to build a for loop that utilizes the replaceWith() and break jQuery and JavaScript methods, respectively.

Any table rows, after that has been accomplished, that have only empty tds, can be removed.

Lastly, this question stems from another StackOverflow question that I nearly have solved, where, this is the last hurdle that I need to cross to solve it.

Work in progress of that question can be found here.

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>

解决方案

I asked the question a different way and received the correct answer in this post.

$(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);
  }

});

这篇关于jQuery将TD插入适当的列（俄罗斯方块样式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆