0

入力：

<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を使用しています。セレクターは要素 ID ではなく CSS クラスである必要があります

私は試しています

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

しかし、それは機能していません。

4

1 に答える 1

1

これにより、元の行の直後に新しい行が作成され、クラスの各要素のコンテンツが移動されますwarning。tdこれは、新しい行に1 つのみが必要であることを前提としています。

$(".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

于 2013-02-21T12:04:10.223 に答える