jquery - 从 td 中移除一个嵌套元素并将其添加为下一行

Question

输入：

<table>
  <tr>
    <td>
      <div id="gvMasterGrid_ctl03_pnlWarning" class="warning">
        <span id="gvMasterGrid_ctl03_lblWarning">This has a problem</span>
      </div>
    </td>
  </tr>
</table>

输出：

<table>
  <tr>
    <td>
      <!--Moved to next row-->
    </td>
  </tr>
  <tr>
    <td>
      <div id="gvMasterGrid_ctl03_pnlWarning" class="warning">
        <span id="gvMasterGrid_ctl03_lblWarning">This has a problem</span>
      </div>
    </td>
  </tr>
</table>

使用 jQuery。选择器应该是 css 类而不是元素 id

我正在尝试

$(".warning").each(function(){
    $(this).closest("tr").after("<tr><td colspan = '999'>" + $(this).html() + "</td></tr>")
});

但它不工作。

Answer 1

这将在原始行之后直接创建一个新行，并将该类的每个元素的内容移到上面warning。这假设您只需要td新行中的一个。

$(".warning").each(function () {
    // Get the parent row
    var parentRow = $(this).closest("tr");
    // Detach the content
    var content = $(this).detach();
    // Create a new row after the parent row
    var newRow = $('<tr><td></td></tr>').insertAfter(parentRow);
    // Get the cell and append the content
    newRow.children('td').append(content);
});

jsfiddle