title: Add / Remove rows in a table and modify dynamically first column cell rowspan
body: <p>I've got a table with five rows. 
  The user can add a row by pressing the + button on each row. The new row is inserted below the row where the user clicked the + button and i want to change the rowspan of the first cell of the row where the user clicked so that it grows/shrinks accordingly.</p>
  
  <p>It's working ok when I add a new row, but it has problem when adding other rows or when deleting rows.</p>
  
  <p>Here is a fiddle with my code: <a href="http://jsfiddle.net/UP262/1/" rel="nofollow">http://jsfiddle.net/UP262/1/</a></p>
  
  <p>What am i doing wrong?It has to do with the manipulation of rowspan, of course.</p>
  
  <p>EDIT - The problem is that when i .clone() the row when adding a second row or removing it I'm cloning a row that hasn't the first 'td'...i need to get the first row of the set dynamically. How can i do that?</p>
  
  <p>EDIT 2 - now the + is working, here is the edited code: <a href="http://jsfiddle.net/UP262/5/" rel="nofollow">http://jsfiddle.net/UP262/5/</a>
  Still need help with the minus</p>
  
  <p>And here is my html/jquery code:</p>
  
  <pre><code>  &lt;table id="tableRealizzazione" style="border:1px solid;" class="display"&gt;
      &lt;thead&gt;
        &lt;tr bgcolor="#B8D3E8" style:=""&gt;
          &lt;th width="10%"&gt;Costi gestione&lt;/th&gt;
  
          &lt;th width="60%"&gt;descrizione&lt;/th&gt;
  
          &lt;th width="10%" align="center"&gt;Totale (migliaia euro)&lt;/th&gt;
  
          &lt;th width="10%"&gt;Azioni&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
        &lt;tr class="even"&gt;
          &lt;td&gt;Locazione&lt;/td&gt;
  
          &lt;td&gt;&lt;input type="text" value="" id="DescrizioneLocazione" name=
          "DescrizioneLocazione[]" /&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;input type="text" class="totaliCostiGestione" value="0" id=
          "TotaleLocazione" name="TotaleLocazione[]" /&gt;&lt;/td&gt;
  
          &lt;td align="left"&gt;&lt;input type="button" style="width: 50px;" value="+" id=
          "aggiungi" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr class="odd"&gt;
          &lt;td&gt;Personale&lt;/td&gt;
  
          &lt;td&gt;&lt;input type="text" value="" id="DescrizionePersonale" name=
          "DescrizionePersonale[]" /&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;input type="text" class="totaliCostiGestione" value="0" id=
          "TotalePersonale" name="TotalePersonale[]" /&gt;&lt;/td&gt;
  
          &lt;td align="left"&gt;&lt;input type="button" style="width: 50px;" value="+" id=
          "aggiungi" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr class="even"&gt;
          &lt;td&gt;Consumi e manutenzione&lt;/td&gt;
  
          &lt;td&gt;&lt;input type="text" value="" id="DescrizioneConsumiManutenzione" name=
          "DescrizioneConsumiManutenzione" /&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;input type="text" class="totaliCostiGestione" value="0" id=
          "TotaleConsumiManutenzione" name="TotaleConsumiManutenzione" /&gt;&lt;/td&gt;
  
          &lt;td align="left"&gt;&lt;input type="button" style="width: 50px;" value="+" id=
          "aggiungi" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr class="odd"&gt;
          &lt;td&gt;Assicurazioni e simili&lt;/td&gt;
  
          &lt;td&gt;&lt;input type="text" value="" id="DescrizioneAssicurazioniSimili" name=
          "DescrizioneAssicurazioniSimili" /&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;input type="text" class="totaliCostiGestione" value="0" id=
          "TotaleAssicurazioniSimili" name="TotaleAssicurazioniSimili" /&gt;&lt;/td&gt;
  
          &lt;td align="left"&gt;&lt;input type="button" style="width: 50px;" value="+" id=
          "aggiungi" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr class="even"&gt;
          &lt;td&gt;Marketing&lt;/td&gt;
  
          &lt;td&gt;&lt;input type="text" value="" id="DescrizioneMarketing" name=
          "DescrizioneMarketing" /&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;input type="text" class="totaliCostiGestione" value="0" id=
          "TotaleMarketing" name="TotaleMarketing" /&gt;&lt;/td&gt;
  
          &lt;td align="left"&gt;&lt;input type="button" style="width: 50px;" value="+" id=
          "aggiungi" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;Totale&lt;/td&gt;
  
          &lt;td&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;input type="text" readonly="readonly" value="0" id=
          "TotaleGestione" name="TotaleGestione" style=
          "background-color: rgb(204, 204, 204);" /&gt;&lt;/td&gt;
  
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
      $('#aggiungi').live('click', function(){
          debugger;
          var thisRow = $(this).parent().parent();
          $(this).parent().parent().clone(true).insertAfter(thisRow);
          $(this).val("-");
          $(this).attr("id","remove");
          var nextRow = thisRow.next();
          currRowSpan = thisRow.children(":first").attr("rowspan");
          thisRow.children(":first").attr("rowspan", currRowSpan+1);
          nextRow.find('input:not(#aggiungi)').val("");
          nextRow.children(":first").remove();
          });
  
      $('#remove').live('click', function(){
          var prevRow = $(this).parent().parent().next();
          currRowSpan = prevRow.children(":first").attr("rowspan");
          prevRow.children(":first").attr("rowspan", currRowSpan-1);
          $(this).parent().parent().remove();
          });
  </code></pre>