Question

我的网站上有一张桌子，该桌子太长了，无法用于移动设备，因此正尝试对其进行反转，使其类似于：

1 a
2 b
3 c
4 d

代替：

1 2 3 4
a b c d

$("#table").each(function() {
  var $this = $(this);
  var newrows = [];
  $this.find("tr").each(function(){
    var i = 0;
    $(this).find("td").each(function(){
      i++;
      if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
      newrows[i].append($(this));
    });
  });
  $this.find("tr").remove();
  $.each(newrows, function(){
    $this.append(this);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
</tr>
</table>

我发现了此功能，并且在某些情况下可以正常使用，但并非在所有情况下都可以正常工作（当然，通常在此代码段中可以正常使用），但是在其他设备上却报错：

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
    at Function.oe.contains (jquery.js:2)
    at xe (jquery.js:2)
    at Re (jquery.js:2)
    at w.fn.init.append (jquery.js:2)
    at script.js:35
    at Function.each (jquery.js:2)
    at HTMLTableElement.<anonymous> (script.js:34)
    at Function.each (jquery.js:2)
    at w.fn.init.each (jquery.js:2)
    at HTMLDocument.<anonymous> (script.js:22)

此错误的第34 + 35行是指：

$.each(newrows, function(){
  $this.append(this);

任何帮助或建议，将不胜感激。

Answer 1

我认为问题是由空数组元素引起的。

我更改了此内容

$(this).find("td").each(function(){
  i++;
  if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
  newrows[i].append($(this));
});

对此：

$(this).find("td").each(function(){
  if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
  newrows[i].append($(this));
  i++;
});

现在它似乎在所有设备上都能正常工作

JS / Jquery-重新排列HTML表格元素

1 个答案: