Add count to jQuery added row in PHP foreach

Question

I'm working on a ecommerce cart, which builds products by a PHP foreach() loop, adding each product in a <tr>. This shop has 'bundled' products, meaning a couple of <tr>'s belong together as one big product.

The client asked me to edit the cart-view, add some stuff, move some around. So I used jQuery to add (i.e.) a legend after each head-item like so:

<tr>---- Item ----</tr>
    <tr>Added row</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>

<tr>---- Item ----</tr>
    <tr>Added row</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>

<tr>---- Item ----</tr>
    <tr>Added row</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>
    <tr>Detail</tr>

Now, for various reasons I need to identify each group of products. I achieved this by adding a $i count in each head-item. The problem is that the added row is made by jQuery, outside the foreach-loop, and so doesn't have the $i count like the rest of them, result like this:

<tr class="head_1">---- Item ----</tr>
    <tr>Added row</tr>
    <tr class="detail_1">Detail</tr>
    <tr class="detail_1">Detail</tr>

<tr class="head_2">---- Item ----</tr>
    <tr>Added row</tr>
    <tr class="detail_2">Detail</tr>
    <tr class="detail_2">Detail</tr>
    <tr class="detail_2">Detail</tr>

<tr class="head_3">---- Item ----</tr>
    <tr>Added row</tr>
    <tr class="detail_3">Detail</tr>
    <tr class="detail_3">Detail</tr>
    <tr class="detail_3">Detail</tr>
    <tr class="detail_3">Detail</tr>

What I need is to add the same count in a class to the added jQuery row. I'm clueless on how to, anyone?

Moar details I add the row using jQuery('tr.head').after() like this:

jQuery( ".mainitem" ).after( "\
    <tr class='addedrow'>\
        <td class='product-remove'></td>\
        <td class='product-thumbnail'></td>\
        <td class='product-name'></td>\
        <td class='product-price'></td>\
        <td class='product-quantity'></td>\
        <td class='product-subtotal'></td>\
    </tr>" 
);

and figured I could get the count of the added rows like this: var $rowcount = jQuery(".addedrow").length;

Can you show jquery you use to add row? You could take class of a parent element you are adding row to and use its counter. — Rafał Cz.
– Rafał Cz., Commented Oct 30, 2015 at 9:50
@SajithaNilan; because the row in question is added óutside the foreach() loop using jQuery.after — Asitis
– Asitis, Commented Oct 30, 2015 at 10:06
@Ranker; the jQuery used to add row is at the end of the question; pick-up each 'main'-row by class, use after() to add a new row. I've updated with the full code — Asitis
– Asitis, Commented Oct 30, 2015 at 10:08
Try to replace your jQuery('tr.head').after() with code from my answer. — Rafał Cz.
– Rafał Cz., Commented Oct 30, 2015 at 10:09

Asitis · Accepted Answer · 2015-10-30 10:44:44Z

2

This is probably the easiest fix: I added this to the jQuery script where the row was added, and it worked :)

$ii = 0;
jQuery('.addedrow').each(function(){
    $ii++;
    jQuery(this).addClass('count'+$ii);
});

Both given answers seem to be correct though, but required a different structure that I used in my code. Thanks all for getting me on the right track!

answered Oct 30, 2015 at 10:44

Asitis

4521 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mathijs Segers Over a year ago

That is, indeed simpler.

Rafał Cz. Over a year ago

It is neat indeed. Just one possible error it can produce is situation where your php will skip one of the tr and counter will go like 1,2,4,5. In this case your added row will not match.

Asitis Over a year ago

I agree, it's not perfect as there is room for error (though I doubt it will go wrong any time soon). Though the client knows this; you can't have perfect and quick together. We'll use this for now and improve the code in the future.

Rafał Cz. · Accepted Answer · 2015-10-30 10:02:12Z

1

jQuery('tr.head').after(function() {
    var current = this.prop('className');  
    var arr = current.split('_');
    return "<tr class='"+arr[1]+"'>" + Added row + "</tr>";
});

answered Oct 30, 2015 at 10:02

Rafał Cz.

7879 silver badges19 bronze badges

Comments

Mathijs Segers · Accepted Answer · 2015-10-30 10:21:20Z

1

Would this work for you? define the head item in a var, then you can split that class to get the id. If there are multiple you can use the .each() of jquery like so:

jQuery( ".mainitem" ).each(function(){
var mainItem = $(this);
var id = mainItem.attr("id").split("_")[1];
mainItem.after( "\
    <tr class='addedrow groupid_"+ id +"'>\
        <td class='product-remove'></td>\
        <td class='product-thumbnail'></td>\
        <td class='product-name'></td>\
        <td class='product-price'></td>\
        <td class='product-quantity'></td>\
        <td class='product-subtotal'></td>\
    </tr>" 
);
});

This is of course assuming your header tr has the mainitem as class, oh this might cause issues because We're splitting on underscore, and the class would be something like "mainitem header_1", this would work but if it's as "header_1 mainitem" we need to change. But you can probably split on space and use the correct one.

Must add, this all feels a bit dirty :), so you're probably better off adding the header_1 as id so you're sure it's not nested with multiple classes, or use data-header-id attribute, that would be even cleaner.

edited Oct 30, 2015 at 10:21

answered Oct 30, 2015 at 10:14

Mathijs Segers

6,2489 gold badges54 silver badges78 bronze badges

1 Comment

Mathijs Segers Over a year ago

I made a mistake with attr("id") if you're using classes btw. But I bet you can figure that one out, should be class

Collectives™ on Stack Overflow

Add count to jQuery added row in PHP foreach

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related