I’m getting stuck on the logic to use to accomplish this in javascript/jquery and could use some help if anyone had any ideas.
I have table which shows the per item cost of the products on an invoice.
The goal is to find all the products by their class(currently shirtcountrow and hoodiecountrow but there will be more later) and combine the ones that have the same value.
The table currently looks like this:
<table id="productmathtable">
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="100" style="width:60px"></td>
</tr>
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
</tr>
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
</tr><tr>
<td>Hoodie</td>
<td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>
</tr>
<tr>
<td>Hoodie</td>
<td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td></tr>
</table>
And I want it to look like this after a jquery/javascript function is preformed:
<table id="productmathtable">
<tr>
<td>Shirt</td>
<td><input class="shirtcountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="200" style="width:60px"></td>
</tr>
<td>Hoodie</td>
<td><input class="hoodiecountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="280" style="width:60px"></td>
</tr>
</table>
I am pretty sure i need to change my html so it’s easier to identify each part that i want to change, but im not exactly sure how