将TD数组转换为列jQuery

时间：2016-05-09 16:01:00

标签： javascript jquery arrays sorting transpose

请帮助我在适当的列中放置与列标题对应的类的单元格。迭代应该按列进行，然后循环遍历table.temp TD数组，并用找到的第一个temp td替换找到的第一个空单元格。

最终结果应与找到的表here类似。

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

tempArry = tempArry.sort();
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

在这里，我将如何解决这个问题。 $(this).attr('class')将获取$ tempScanner中当前项的类，$(this).text()将获取内容。

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

答案 1 :(得分：2)

要这样做。最初是一个对象数组，在您的代码中形成错误排序的html元素。

（Сделалтак.Изначальносформировалмассивобъектов，таккакввашемкоденеправильносортированы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>

相关问题
最新问题