使用JQuery重组表

Question

因为我无法修改生成表的代码本身，所以我试图在JQuery的帮助下在dom中重构它。更准确地说，我试图将 td id =“td03”移到 tr id =“tr01”之上。

<table id="myTableID">
  <tbody>
    <tr id="tr01">
      <td>2</td>
      <td id="td03">3</td>
    </tr>
  </tbody>
</table>

我似乎只是在tr中移动它而不是将它移到tr

之上

$('#tr01').prepend($('#td03').contents());

Fiddle with it

预期结果将是

<table id="myTableID">
  <tbody>
    <tr id="td03">
      <td>3</td>
    </tr>
    <tr id="tr01">
      <td>2</td>
    </tr>
  </tbody>
</table>

请帮忙。提前谢谢。

Answer 1

您所要做的就是在之前插入：

$(document).ready(function() {
        $("#td03").insertBefore($("#tr01"))
})

这是您的答案<{3}}

但是，这会产生无效的HTML。建议您的最终结果生成属性格式化的HTML，浏览器将正确呈现。

如果你在tr01之前追加另一个表格行，它会给你正确的html。

$(document).ready(function() {
    $("#tr01").parent().append("<tr id='tr00'>");
  $("#tr00").append($("#td03"));

})

这是fiddle的工作