Question

在我的下面的代码中，第二个表不会保留与第一个表中的代码相同的代码。

有没有办法让我可以保留代码但仍然将我的表替换为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 -->

Answer 1

这是因为您要用多个对象的内容替换多个对象。

这是固定版本：

<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循环中运行，然后用相应的表逐个替换项目。

Answer 2

你应该循环遍历不同的元素并生成你自己的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

Answer 3

是

只需更换 $('table').replaceWith( $('table').html() 在您的代码中

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

如何将多个表替换为Div？

3 个答案: