javascript - テーブルの行を抽出する

Question

これが構造です。そして、私のプロジェクトにはこのようなものがたくさんあります。 <div class="extra">

<div class="extra">
    <table width="90%">
        <colgroup>
        <col width="40%"/>
        <col width="30%"/>
        <col width="30%"/>
        </colgroup>
        <tr><td>/*.1.*/</td><td>/*.1.*/</td><td>/*.1.*/</td></tr>
        <tr><td>/*.2.*/</td><td>/*.2.*/</td><td>/*.2.*/</td></tr>
    </table>
</div>

各 div を次のように変更するにはどうすればよいですか。

<div class="line">
    <table width="90%">
        <colgroup>
        <col width="40%"/>
        <col width="30%"/>
        <col width="30%"/>
        </colgroup>
        <tr><td>/*.1.*/</td><td>/*.1.*/</td><td>/*.1.*/</td></tr>
    </table>
</div>

<div class="line">
    <table width="90%">
        <colgroup>
        <col width="40%"/>
        <col width="30%"/>
        <col width="30%"/>
        </colgroup>
        <tr><td>/*.2.*/</td><td>/*.2.*/</td><td>/*.2.*/</td></tr>
    </table>
</div>

原則:

1. 表の各列を抽出して、単一の表を再作成する必要があります。
2. 新しいテーブルは new にネストされています<div class="line">
3. <div class="line">andのスタイルは<colgroup>元のままにしておく必要があります。

JSFIDDLEを参照してください。コントロール パネルに「Uncaught Error: NotFoundError: DOM Exception 8」と表示されます。

Answer 1

次のスクリプトで試してみてください。

 $(document).ready(function () {

        var $extra = $('.extra');
        $extra.each(function () {
            var $this = $(this).clone();
            $this.find('tr').remove();
            $.each($(this).find('tr'), function () {
                var newdiv = $this.clone().find('table').append(this).end().removeClass('extra').addClass('line');
                $('body').append(newdiv);
            });
            $(this).remove();
        });
    });