Transpose array of TDs into Columns jQuery

后端未结

关注

 2  1236

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

相关标签:

2条回答

清酒与你

2021-01-23 08:01

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

0 讨论(0)

独厮守ぢ

2021-01-23 08:14

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>

0 讨论(0)