javascript-将TD数组转置为jQuery列

2022-12-31 15:25:58

请帮助我将具有对应于列标题的类的单元格放在适当的列中.应当按列进行迭代,然后遍历table.temp TD数组,并用找到的第一个temp td替换找到的第一个空单元格.

最终结果应类似于找到的表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>

解决方法:

为此.最初,对象数组在代码中形成为错误排序的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>

码农公寓

相关文章