CODEWITHSUNDEEP
jqueryhtml
Onimax
Onimax

Reputation: 107

Make this Replacewith on .each function jQuery

I have a simple code like this:

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

I have multiple tables that has an id of tblPrice. it replaces only one table at a time so how to make this an .each function ()

Upvotes: 1

Views: 403

Answers (5)

Mr_Green
Mr_Green

Reputation: 41832

Instead of replacing with jquery you can change the styling of the table and it's children element to behave like div's and span's.

For example,

table, tr, tbody{
    display: block;  /* div */
    /* other css styles */
}

td{
    display: inline; /* span */
    /* other css styles */
}

This ofcourse doesnot completely change the table elements but it might help you in what you are actually trying to achieve.

Upvotes: 0

Bharath R
Bharath R

Reputation: 1531

as the comments said..

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

Upvotes: 0

palaѕн
palaѕн

Reputation: 73896

IDs are supposed to be unique in the DOM. Even if you use the .each method here, you will always get the first element only every time with the ID.

I will suggest to use class instead and add them to all the tables like myTable and modify your code like:

$('.myTable').replaceWith(function () {
    return $(this).html()
        .replace(/<tbody/gi, "<div id='table'")
        .replace(/<tr/gi, "<div")
        .replace(/<\/tr>/gi, "</div>")
        .replace(/<td/gi, "<span")
        .replace(/<\/td>/gi, "</span>")
        .replace(/<\/tbody/gi, "<\/div");
});

Upvotes: 0

Neel
Neel

Reputation: 11721

just take a class attribute in all the tables and put the below code:-

$('.tblPrice').each(function() {
    var $this = $(this);
    $this.replaceWith($this.html() ... );
});

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

I have multiple tables that has an id of tblPrice.

This is your problem. IDs must be unique. JavaScript will stop looking past the first matching ID it finds. Modify your #tblPrice tables to all have different IDs but give each a similar class, then use the class selector instead of the ID selector.

For instance:

<table class="tblPrice" id="tblPrice1">
    ...
</table>
<table class="tblPrice" id="tblPrice2">
    ...
</table>

To turn this into an .each() loop, you can then simply:

$('.tblPrice').each(function() {
    var $this = $(this);
    $this.replaceWith($this.html() ... );
});

You'll also want to change that id="table" in your HTML replacement for the same reason above. Use a class instead:

.replace(/<tbody/gi, "<div class='table'")

Upvotes: 1

Related Questions