I am stuck playing with jQuery and Table
I want to add a value from a text field from a form to a table after the user clicks on the button
In my form there are 3 comboboxes, and 3 of them are dyanmic (values from comboboxes loading from the database)
when the user enters a text field and presses the add button, the values from comboboxes and textbox are added to the div under the form
can you imagine my workflow like this
===============================================
| Express | Standard | Premium
France | _____ 10 ______ | _________ | 20
England | ____________ | _____ 30 __ |
Portugal | ____ 50 ______ | __________ | 80
================================================
When the user clicks to select a country from combobox, and select a mode from combobx (I mean standard-express, etc.) and then enter a number in the text box, it will appear under the form (I use div and append table in div or add a table to the table), then it can get the value and add it to the column that I want
Example, first click "Select France" - "Express" and "20", "Second click" I select "Final" and "Standard" and "30", the third click again select "France" and "Premium" with a value of 15
Another problem is that I have one combobox for the provider, which means that there are many providers in Express, such as Express 1 - Express 2 - Express 3 and so on.
When I select France and Express again, but another provider adds this value to the Express and France Row column
typing is so hard to explain what I want
I will explain in the diagram below how this is step by step
First click:
============================================
_____ | Express
France | 20
================================================== Second click
| Express_____ | Standard
France | ____ 20 ________ |
England | ________________ | thirty
Third click
==================================================== ===
__| Express | Standard | Premium
France | ______ 20 ___ | _______________ | fifteen
England | _____________ | _______ 30 ____ |
==================================================== ===
another problem
_____ | __ Express __ | __ Standard | Premium
France | Express1 20 | __________ | Premium1 15, Premium3 20
England | __________ | Standard2 30 |
==================================================== ============
my code
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#btAdd").click(function() { var txtCost = $('#txtCost').val(); var ctryID = $('#CountryID').val(); var ctryName = $('#CountryID option:selected').text(); var modeID = $('#ModeID').val(); var modeName = $('#ModeID option:selected').text(); var ProviderID = $('#ProviderID').val(); var ProviderName = $('#ProviderID option:selected').text(); var HeaderTitle = $('#HeaderTitle').length; var modenameID = $('#modeNameID'+modeName).text(); var CountryID = $('#Country'+ctryID).text(); if(HeaderTitle == 0){ $('#tblAppend').append( '<tr id="HeaderTitle"><td></td><td id="modeNameID'+modeName+'">'+modeName+'</td><tr>' ); }else{ if(modeName != modenameID){ $('#HeaderTitle').append( '<td id="modeNameID'+modeName+'">'+modeName+'</td>' ); } } if(CountryID != ctryName){ $('#tblAppend').append( '<tr id="nameCTR'+ctryID+'"><td id="Country'+ctryID+'">'+ctryName+'</td></tr>' ); } if(CountryID != ctryName && modeName != modenameID){ $('#nameCTR'+ctryID).append( '<td id="cost'+txtCost+'">'+txtCost+'</td>' ); } if(CountryID != ctryName && modeName == modenameID){ $('#nameCTR'+ctryID).append( '<td id="cost'+txtCost+'">'+txtCost+'</td>' ); } if(CountryID == ctryName && modeName != modenameID){ $('#nameCTR'+ctryID).append( '<td id="cost'+txtCost+'">'+txtCost+'</td>' ); } if (CountryID == ctryName && modeName == modenameID){ $('#cost'+txtCost).append( '$'+txtCost ); } }); }); </script> </head> <body> <form> <table cellpadding="0" cellspacing="0"> <tr> <td><input style="width:100px;" type="text" name="txtCost" id="txtCost" value=""/></td> <td> Country <select id="CountryID"> <option value="1">France</option> <option value="2">USA</option> <option value="3">Poland</option> <option value="4">Vietnam</option> </select> </td> <td> Mode <select id="ModeID"> <option value="p1">Express</option> <option value="p2">Standard</option> <option value="P3">Premium</option> </select> </td> <td> Provider <select id="ProviderID"> <option value="A1">A1</option> <option value="A2">A2</option> <option value="A3">A3</option> </select> </td> <td> <input type="button" id="btAdd" name="btAdd" value="Add"/> </td> </tr> </table> <table cellpadding="0" cellspacing="0" id="tblAppend"> <th> </th> </table> </form> </body> </html>