What's the best way for the user to add multiple details to single area of input?
<p>In my project the user has to detail his management expenses in four different areas. At first we had a simple table (<a href="http://85.94.221.106/table.html" rel="nofollow">this one</a>) where he had to write all the data grouping all the expenses description in a textarea, now we want him to detail each area, so i have to give the user the possibility to add "rows" to each area. That means that if his "Impegni" expenses consists of three entries he must enter three "rows".</p>

<p>My idea is to use jquery to let the user add rows and modify the rowspan of the first column when the user adds/remove a row (that is, if you need to enter another row for "Impegni" i create a new row under  the third row and add "colspan=2" to the "impegni" cell) but maybe there is a better way to handle this kind of input.</p>

<p>I try to explain it even better: the four rows that are present in my table are the "master" areas and the user must add details to those areas. Creating new "sub-rows" for each area it's an idea,  but maybe there is a better way to handle it!</p>

<p>EDIT - another idea is to have four different tables (one for each one of the "master" rows) and show hide them with tabs (look at example five on <a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/form/dynamic.html" rel="nofollow">this</a> page) but i don't know how to handle the sum of all the rows</p>

<p>What do you suggest?</p>
