在表中添加/删除行并动态修改第一列单元格的行跨度

Question

我有一张有五行的桌子。 用户可以通过按每行上的 + 按钮来添加一行。新行插入到用户单击 + 按钮的行下方，我想更改用户单击的行的第一个单元格的行跨度，以便相应地增长/缩小。

添加新行时可以正常工作，但添加其他行或删除行时出现问题。

这是我的代码：http://jsfiddle.net/UP262/1/

我做错了什么？当然，这与对行跨度的操作有关。

编辑 - 问题是当我 .clone() 行添加第二行或删除它时，我正在克隆没有第一个 'td' 的行...我需要获取第一行动态的集合。我该怎么做？

编辑 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') 来查找行元素。