4

在我下面的第二个表的代码中，它没有保留相同的代码，它似乎被第一个表中的代码覆盖。

有没有办法让我可以保留代码但仍将我的表替换为 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 循环运行，并用相应的表格一一替换了这些项目。

于 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

Yes.

Just replace $('table').replaceWith( $('table').html() in your code with

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

于 2012-04-13T13:40:25.037 回答