javascript - 使用 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"))
})

这是一个有效的 fiddle你的回答

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

如果您在 tr01 之前附加另一个表格行，它将为您提供正确的 html。

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

})

这是一个 fiddle那个工作