4

以下の私のコードでは、2番目のテーブルは同じコードを保持しておらず、最初のテーブルのコードによって上書きされているように見えます。

コードを保持しながら、テーブルをdivとspanに置き換える方法はありますか？

    <script>
    $(document).ready(function() {

    $('table').replaceWith( $('table').html()
       .replace(/<tbody/gi, "<div class='table'")
       .replace(/<tr/gi, "<div class='ccbnOutline'")
       .replace(/<\/tr>/gi, "</div>")
       .replace(/<td/gi, "<span")
       .replace(/<\/td>/gi, "</span>")
       .replace(/<\/tbody/gi, "<\/div")
    );

    });
    </script>
    </head>
    <body>


    <!-- This will be changed into div's and span's -->
    <table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
    </tbody>
    </table>
    <!-- End of Example Table -->


            <!-- This will be changed into div's and span's -->
    <table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td>one123</td>
    <td>two123</td>
    <td>three123</td>
    </tr>
    </tbody>
    </table>
    <!-- End of Example Table -->
4

3 に答える 3

4

これは、複数のオブジェクトを複数のオブジェクトのコンテンツに置き換えているためです。

ここで修正されたバージョン：

<script>
    $(document).ready(function() {
        $('table').each(function (){
            $(this).replaceWith( $(this).html()
                .replace(/<tbody/gi, "<div class='table'")
                .replace(/<tr/gi, "<div class='ccbnOutline'")
                .replace(/<\/tr>/gi, "</div>")
                .replace(/<td/gi, "<span")
                .replace(/<\/td>/gi, "</span>")
                .replace(/<\/tbody/gi, "<\/div")
            );
        });
    });
</script>

.eachループを実行し、アイテムを1つずつ対応するテーブルに置き換えました。

于 2012-04-13T14:21:20.473 に答える
3

さまざまな要素をループして、実行するのではなく、独自のhtmlを生成する必要があります。.replace正規表現を使用することは、HTML構造を処理するための一般的に悪い習慣です。以下のコードは機能します：

$('table').replaceWith(function() {
    var html = '';

    $('tr', this).each(function() {
        html += '<div class="ccbnOutline">';
        $('td', this).each(function() {
            html += '<span>' + $(this).html() + '</span>';
        });
        html += '</div>';
    });

    return '<div class="table">' + html + '</div>';
});

フィドル： http： //jsfiddle.net/HRYEQ/1

于 2012-04-13T14:30:14.623 に答える
0

はい。

$('table').replaceWith( $('table').html() コードを次のように置き換えるだけ です

$('table:first').replaceWith( $('table').html()。

于 2012-04-13T13:40:25.037 に答える