help extracting and calculate tables cells

hi
i have a very complex form, with a section to add option and option values within it. the options section is generated by clicking a button. all this works.

so there can be an option like "color" and the values can be: red,green,blue.
and say "size" and the values can be : small,medium,large,xtra-large.

now i need to take the sum for EACH OPTION QUANTITY: lets say- the size option has 100 for small, 20 for large and so on.
i need the sum quantity for each option. so the sum of size will be 120.

i left the html as simple as i could to help you to help me, this is the html code:
        <div id="currentopts">
            <div class="optis" id="option158">
                <table class="optiontable">
                    <thead>
                        <tr>
                            <th>Option name</th>
                            <th>Position</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" value="color" name="158" class="optclass"></td>
                            <td><input type="text" size="5" value="0" name="158" class="optpos"></td>
                            <td>
                                <a class="add_option_valueup" id="add_158" title="158" href="#">Add option value</a>
                                <a class="remove_optionup" id="remove_158" href="#">Remove</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="optvalis" id="optionvalue_88">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                             
                                <td><input type="text" size="5" value="60" name="quantity" class="theqty"></td>
                                <td>
                                    <a class="remove_option_valueup" id="88" href="#">Remove</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="optvalis" id="optionvalue_87">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr> 
                                <td><input type="text" size="5" value="20" name="quantity" class="theqty"></td>
                                <td><a class="remove_option_valueup button orange" id="87" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="optvalis" id="optionvalue_89">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                           
                                <td><input type="text" size="5" value="30" name="quantity" class="theqty"></td>                              
                                <td><a class="remove_option_valueup" id="89" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="optis" id="option156">
                <table class="optiontable theopthead">
                    <thead>
                        <tr>
                            <th>Option name</th>
                            <th>Position</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" value="size" name="156" class="optclass"></td>
                            <td><input type="text" size="5" value="0" name="position" class="optpos"></td>
                            <td><a class="add_option_valueup" id="add_156" title="156" href="#">Add option value</a><a class="remove_optionup" id="remove_156" href="#">Remove</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="optvalis" id="optionvalue_82">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                       
                                <td><input type="text" size="5" value="70" name="quantity" class="theqty"></td>     
                                <td><a class="remove_option_valueup" id="82" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="optvalis" id="optionvalue_83">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                              
                                <td><input type="text" size="5" value="50" name="quantity" class="theqty"></td>
                                <td><a class="remove_option_valueup button orange" id="83" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="optis" id="option157">
                <table class="optiontable theopthead">
                    <thead>
                        <tr>
                            <th>Option name</th>
                            <th>Position</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" value="sleeves" name="157" class="optclass"></td>
                            <td><input type="text" size="5" value="0" name="position" class="optpos"></td>
                            <td><a class="add_option_valueup" id="add_157" title="157" href="#">Add option value</a><a class="remove_optionup" id="remove_157" href="#">Remove</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="optvalis" id="optionvalue_86">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                               
                                <td><input type="text" size="5" value="20" name="quantity" class="theqty"></td>     
                                <td><a class="remove_option_valueup" id="86" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="optvalis" id="optionvalue_85">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                             
                                <td><input type="text" size="5" value="70" name="quantity" class="theqty"></td>
                                <td><a class="remove_option_valueup button orange" id="85" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="optvalis" id="optionvalue_84">
                    <table class="optiontable">
                        <thead>
                            <tr>

                                <th>Quantity</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>                               
                                <td><input type="text" size="5" value="50" name="quantity" class="theqty"></td>    
                                <td><a class="remove_option_valueup" id="84" href="#">Remove</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>   

Open in new window




best regards
LVL 1
derridaAsked:
Who is Participating?
 
Meir RivkinConnect With a Mentor Full stack Software EngineerCommented:
	var options = {};
	$('.optis').each(function() {
		var sum=0;
		var optionName = $(this).find('input[class="optclass"]').attr("value");
		$(this).find('input[name="quantity"]').each(function(){
			sum+=parseInt($(this).attr("value"));			
		});
		options[optionName] = sum;
	});

Open in new window


the options variable maps option name (color,size etc) and the sum of the quantities, so u ended up with:
options["color"] = 110
options["size"] = 120
options["sleeves"] = 140
0
 
derridaAuthor Commented:
you just saved my life. thanks so much
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.