How can I replace multiple tables into Divs?

html, jquery

Solution

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.

Problem

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

Original source