添加/刪除表格中的行並動態修改第一列單元格行數

Question

我有一個包含五行的表格。 用戶可以通過按每行上的+按鈕來添加一行。新行插入到用戶單擊+按鈕的行下方，我想要更改用戶單擊的行的第一個單元格的行跨度，以便相應地增大/縮小。

當我添加新行時它工作正常，但在添加其他行或刪除行時有問題。

這裏是我的代碼小提琴：http://jsfiddle.net/UP262/1/

什麼我做錯了它做行跨度的操作，當然。

編輯 - 問題是，當我.clone（）行添加第二行或刪除它時，我克隆了一行沒有第一個'TD'...我需要第一個動態設置的行。我怎樣才能做到這一點？

EDIT 2 - 現在+工作，這裏是編輯的代碼：http://jsfiddle.net/UP262/5/ 仍然需要負

幫助，這是我的HTML/jQuery代碼：

<table id="tableRealizzazione" style="border:1px solid;" class="display"> 
    <thead> 
     <tr bgcolor="#B8D3E8" style:=""> 
     <th width="10%">Costi gestione</th> 

     <th width="60%">descrizione</th> 

     <th width="10%" align="center">Totale (migliaia euro)</th> 

     <th width="10%">Azioni</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr class="even"> 
     <td>Locazione</td> 

     <td><input type="text" value="" id="DescrizioneLocazione" name= 
     "DescrizioneLocazione[]" /></td> 

     <td align="center"><input type="text" class="totaliCostiGestione" value="0" id= 
     "TotaleLocazione" name="TotaleLocazione[]" /></td> 

     <td align="left"><input type="button" style="width: 50px;" value="+" id= 
     "aggiungi" /></td> 
     </tr> 

     <tr class="odd"> 
     <td>Personale</td> 

     <td><input type="text" value="" id="DescrizionePersonale" name= 
     "DescrizionePersonale[]" /></td> 

     <td align="center"><input type="text" class="totaliCostiGestione" value="0" id= 
     "TotalePersonale" name="TotalePersonale[]" /></td> 

     <td align="left"><input type="button" style="width: 50px;" value="+" id= 
     "aggiungi" /></td> 
     </tr> 

     <tr class="even"> 
     <td>Consumi e manutenzione</td> 

     <td><input type="text" value="" id="DescrizioneConsumiManutenzione" name= 
     "DescrizioneConsumiManutenzione" /></td> 

     <td align="center"><input type="text" class="totaliCostiGestione" value="0" id= 
     "TotaleConsumiManutenzione" name="TotaleConsumiManutenzione" /></td> 

     <td align="left"><input type="button" style="width: 50px;" value="+" id= 
     "aggiungi" /></td> 
     </tr> 

     <tr class="odd"> 
     <td>Assicurazioni e simili</td> 

     <td><input type="text" value="" id="DescrizioneAssicurazioniSimili" name= 
     "DescrizioneAssicurazioniSimili" /></td> 

     <td align="center"><input type="text" class="totaliCostiGestione" value="0" id= 
     "TotaleAssicurazioniSimili" name="TotaleAssicurazioniSimili" /></td> 

     <td align="left"><input type="button" style="width: 50px;" value="+" id= 
     "aggiungi" /></td> 
     </tr> 

     <tr class="even"> 
     <td>Marketing</td> 

     <td><input type="text" value="" id="DescrizioneMarketing" name= 
     "DescrizioneMarketing" /></td> 

     <td align="center"><input type="text" class="totaliCostiGestione" value="0" id= 
     "TotaleMarketing" name="TotaleMarketing" /></td> 

     <td align="left"><input type="button" style="width: 50px;" value="+" id= 
     "aggiungi" /></td> 
     </tr> 

     <tr> 
     <td>Totale</td> 

     <td></td> 

     <td align="center"><input type="text" readonly="readonly" value="0" id= 
     "TotaleGestione" name="TotaleGestione" style= 
     "background-color: rgb(204, 204, 204);" /></td> 

     <td></td> 
     </tr> 
    </tbody> 
    </table> 

    $('#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(); 
     }); 

Answer 1

哦，這麼晚了.. http://jsfiddle.net/3SKXk/1/

Answer 2

也許是不是問題，但比做parent().parent().更好...最好是.closest('tr')找到行元素。