1. 技术文章
  2. Transpose array of TDs into Columns jQuery

Transpose array of TDs into Columns jQuery

由 故事扮演 提交于 2019-12-04 05:12:24

问题


Please help me put the cells with a class that corresponds to the column header, in the appropriate column. The iteration should be done per column and then loop through the table.temp TD array and replace the first empty cell found with the first temp td found.

The end result should look similar to the table found here.

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

tempArry = tempArry.sort();
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;
}
<table style="display:block;" 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>

回答1:


To do so. Initially an array of objects formed as wrongly sorted html-elements in your code.

(Сделал так. Изначально сформировал массив объектов, так как в вашем коде неправильно сортированы html-элементы.)

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

});
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.11.1/jquery.min.js"></script>
<table style="display:block;" 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>



回答2:


Here's how I would go about it. $(this).attr('class') will get the class of the current item in $tempScanner, and $(this).text() will get the contents.

var $tempScanner = $('table.temp tr td');
$tempScanner.each(function() {
  // Select the first empty cell in #tblGrid that has the same class as the current 
  // $tempScanner item and give it the same content. Then remove the original table.
  $("table#tblGrid tr td."+$(this).attr('class')+":empty:first").html($(this).text());
});
$tempScanner.remove();


来源：https://stackoverflow.com/questions/37120353/transpose-array-of-tds-into-columns-jquery

标签
javascript
jquery
arrays
sorting
transpose
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!