如何将多个表替换为div ?

In my code below the second table does not keep the same code it appears to be overwritten by the code from the first table.

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

Is there a way so that I can preserve the code yet still replace my tables to be div's and spans?

是否有一种方法使我可以保留代码，但仍然可以将表替换为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 -->

3 个解决方案

#1

This is because you are replacing multiple objects with content of multiple objects.

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

Here a fixed version:

在一个固定的版本:

<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>

I made it run through an .each loop and replaced the items one by one with the corresponding table.

我让它在一个.each循环中运行，并将这些项逐个替换为相应的表。

#2

You should loop through the different elements and generate your own html, rather than doing .replace -- using regex is generally bad practise for dealing with HTML structures. The below code works:

您应该遍历不同的元素并生成自己的html，而不是执行.replace——使用regex处理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>';
});

Fiddle: http://jsfiddle.net/HRYEQ/1

小提琴:http://jsfiddle.net/HRYEQ/1

#3

Yes.

是的。

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

只是取代美元(“表”)。在代码中替换($('table').html()

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

$('表:第一')。replaceWith($(“表”). html()。

#1